jQuery - pengenalan dan kaedah AJAX

jQuery - Pengenalan kepada AJAX

Apakah itu AJAX?

AJAX = Asynchronous JavaScript dan XML.

Ringkasnya, AJAX memuatkan data di latar belakang dan memaparkannya pada halaman web tanpa memuatkan semula keseluruhan halaman web.

Mengenai jQuery dan AJAX

jQuery menyediakan berbilang kaedah yang berkaitan dengan AJAX.

Dengan kaedah jQuery AJAX, 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.

Pengaturcaraan AJAX masih agak sukar tanpa jQuery.

Menulis kod AJAX biasa bukanlah mudah kerana pelayar yang berbeza melaksanakan AJAX secara berbeza. Ini bermakna anda perlu menulis kod tambahan untuk menguji penyemak imbas. Walau bagaimanapun, pasukan jQuery telah menyelesaikan masalah ini untuk kami. Kami hanya memerlukan satu baris kod yang mudah untuk melaksanakan fungsi AJAX.

Kaedah AJAX load()

kaedah jquery load() ialah salah satu kaedah bukan muat semula dalam jquery ajax Kandungan dalam halaman yang dimuatkan diletakkan dalam ID yang ditentukan, atau halaman itu boleh dimuat semula dengan parameter Biar saya memperkenalkan kepada anda beberapa penggunaan dan masalah biasa beban().

Sintaks:

$(selector).load(URL,data,callback);

Parameter URL yang diperlukan menentukan URL yang ingin anda muatkan.

Parameter data pilihan menentukan set pasangan kunci/nilai rentetan pertanyaan untuk dihantar bersama permintaan.

Parameter panggil balik pilihan ialah nama fungsi yang akan dilaksanakan selepas kaedah load() selesai.

Contoh:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src=" 
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("");});
});
</script>
</head>
<body>
<div id="div1">
<h2>使用 jQuery AJAX 修改文本内容</h2>
</div>
<button>获取外部内容</button>
</body>
</html>

Anda juga boleh menambah pemilih jQuery pada parameter URL.

Contoh berikut memuatkan kandungan elemen dengan id="p1" dalam fail "demo_test.txt" ke dalam elemen <div>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/try/ajax/demo_test.txt #p1");
  });
});
</script>
</head>
<body>
<div id="div1"><h2>使用 jQuery AJAX 修改文本</h2></div>
<button>获取外部文本</button>
</body>
</html>

Spesifikasi parameter panggil balik pilihan Panggilan balik berfungsi untuk membenarkan apabila kaedah load() selesai. Fungsi panggil balik boleh menetapkan parameter yang berbeza:

responseTxt - Mengandungi kandungan hasil apabila panggilan berjaya

statusTXT - Mengandungi status panggilan xhr - Mengandungi

XMLHttpRequest objek.

Kaedah AJAX get() dan post()

kaedah jQuery get() dan post() digunakan untuk meminta daripada pelayan melalui HTTP GET atau data permintaan POST.

Permintaan HTTP: GET lwn. POST

Dua kaedah lazim permintaan-tindak balas di sisi klien dan pelayan ialah: GET dan POST.

GET - Minta data daripada sumber yang ditentukan POST - Serahkan data untuk diproses kepada sumber yang ditentukan

GET pada asasnya digunakan untuk mendapatkan (mendapatkan semula) data daripada pelayan. Nota: Kaedah GET mungkin mengembalikan data cache.

POST juga boleh digunakan untuk mendapatkan data daripada pelayan. Walau bagaimanapun, kaedah POST tidak cache data dan sering digunakan untuk menghantar data bersama-sama dengan permintaan.

kaedah jQuery $.get()

Kaedah $.get() meminta data daripada pelayan melalui permintaan HTTP GET.

Sintaks:

$.get(URL,callback);

Parameter URL yang diperlukan menyatakan URL yang anda ingin minta.

Parameter panggil balik pilihan ialah nama fungsi yang akan dilaksanakan selepas permintaan berjaya.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("/try/ajax/demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
});
</script>
</head>
<body>
<button>发送一个 HTTP GET 请求并获取返回结果</button>
</body>
</html>

Parameter pertama untuk $.get() ialah URL yang ingin kami minta ("demo_test.php").

Parameter kedua ialah fungsi panggil balik. Parameter panggil balik pertama menyimpan kandungan halaman yang diminta, dan parameter panggil balik kedua menyimpan status permintaan.

Petua: Fail PHP ini ("demo_test.php") adalah serupa dengan ini:

<?php
echo 'Ini ialah data yang dibaca daripada fail PHP. ';
?>

kaedah jQuery $.post()

permintaan kaedah $.post() daripada pelayan melalui permintaan HTTP POST data.

Sintaks:

$.post(URL,data,callback);

Parameter URL yang diperlukan menyatakan URL yang anda ingin minta.

Parameter data pilihan menentukan data yang akan dihantar bersama permintaan.

Parameter panggil balik pilihan ialah nama fungsi yang akan dilaksanakan selepas permintaan berjaya.

Contoh berikut menggunakan $.post() untuk menghantar data bersama-sama dengan permintaan:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",{
name:"php中文网",
url:"http://www.php.cn"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});
});
</script>
</head>
<body>
<button>发送一个 HTTP POST 请求页面并获取返回内容</button>
</body>
</html>

Parameter pertama $.post() ialah URL yang ingin kami minta ("demo_test_post. php" ).

Kemudian kami menghantar data bersama permintaan (nama dan bandar).

Skrip PHP dalam "demo_test_post.php" membaca parameter ini, memprosesnya dan mengembalikan hasilnya.

Parameter ketiga ialah fungsi panggil balik. Parameter panggil balik pertama menyimpan kandungan halaman yang diminta, manakala parameter kedua menyimpan status permintaan.

Petua: Fail PHP ini ("demo_test_post.php") kelihatan seperti ini:

<?php
$name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
$city = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
echo '网站名: ' . $name;
echo "\n";
echo 'URL 地址: ' .$city;
?>

Meneruskan pembelajaran

fail baharu

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $.post("/try/ajax/demo_test_post.php",{ name:"php中文网", url:"http://www.php.cn" }, function(data,status){ alert("数据: \n" + data + "\n状态: " + status); }); }); }); </script> </head> <body> <button>发送一个 HTTP POST 请求页面并获取返回内容</button> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik

jQuery - pengenalan dan kaedah AJAX

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]