masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

jQuery - Pengenalan kepada AJAX

Apakah itu AJAX?

AJAX = Asynchronous JavaScript dan XML.

AJAX ialah teknologi untuk mencipta halaman web yang pantas dan dinamik.

AJAX membenarkan halaman web dikemas kini secara tidak segerak dengan menukar sejumlah kecil data dengan pelayan di latar belakang. Ini bermakna bahagian halaman web boleh dikemas kini tanpa memuatkan semula keseluruhan halaman.

Untuk halaman web tradisional (tidak menggunakan AJAX), jika kandungan perlu dikemas kini, keseluruhan halaman web mesti dimuat semula.

Terdapat banyak kes aplikasi menggunakan AJAX: Sina Weibo, Peta Google, Kaixin.com, dsb.

Mengenai jQuery dan AJAX

JQuery ialah perpustakaan js ringan yang serasi dengan CSS3 dan pelbagai pelayar (IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+ ). jQuery membolehkan pengguna memproses dokumen dan acara HTML dengan lebih mudah, melaksanakan kesan animasi, dan menyediakan interaksi AJAX dengan mudah untuk tapak web.

Dengan kaedah AJAX jQuery, anda boleh meminta teks, HTML, XML atau JSON daripada pelayan jauh menggunakan HTTP Get dan HTTP Post - dan anda boleh memuatkan data luaran ini terus ke dalam elemen terpilih halaman web tengah.


Contoh:

Tunjukkan satu dahulu Kod bahagian hadapan: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //按钮单击时执行
            $("#testAjax").click(function(){
                //Ajax调用处理
                var html = $.ajax({
                    type: "POST",
                    url: "text.php",
                    data: "name=garfield&age=18",
                    async: false
                }).responseText;
                $("#myDiv").html('<h2>'+html+'</h2>');
            });
        });
    </script>
</head>
<body>
<div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
<button id="testAjax" type="button">Ajax改变内容</button>
</body>
</html>

Apabila memaparkan sekeping kod php latar belakang, kami menamakannya sebagai text.php: 

<?php
  $msg='Hello,'.$_POST['name'].',your age is '.$_POST['age'].'!';
  echo $msg;
?>

Dengan cara ini, kami melengkapkan contoh panggilan JQuery Ajax yang mudah.

Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ //按钮单击时执行 $("#testAjax").click(function(){ //Ajax调用处理 var html = $.ajax({ type: "POST", url: "text.php", //调用text.php data: "name=garfield&age=18", async: false }).responseText; $("#myDiv").html('<h2>'+html+'</h2>'); }); }); </script> </head> <body> <div id="myDiv"><h2>通过 AJAX 改变文本</h2></div> <button id="testAjax" type="button">Ajax改变内容</button> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492423 permainan