Contoh dalam artikel ini menerangkan kaedah load() dan post() ajax dalam jQuery. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:
1. kaedah muat()
Kaedah load() jQuery ajax boleh memuatkan kod fail HTML jauh dan memasukkannya ke dalam DOM Ini masih berbeza sedikit daripada post and get, tetapi ia boleh memuatkan html halaman dan menyimpannya dengan cepat DOM dan boleh laku.
Kaedah load() menggunakan kaedah GET secara lalai Jika parameter data diluluskan, kaedah Post digunakan.
Tukar kepada mod POST secara automatik apabila menghantar parameter tambahan. Dalam jQuery 1.2, anda boleh menentukan pemilih untuk menapis dokumen HTML yang dimuatkan, dan hanya kod HTML yang ditapis akan dimasukkan ke dalam DOM. Sintaks adalah seperti "url #some > selector", pemilih lalai ialah "body>*".
Penjelasan:
load ialah fungsi Ajax yang paling mudah, tetapi penggunaannya mempunyai had:
1. Ia digunakan terutamanya untuk antara muka Ajax yang secara langsung mengembalikan HTML
2. Muatkan ialah kaedah pembungkus jQuery yang perlu dipanggil pada pembungkus jQuery dan akan memuatkan HTML yang dikembalikan ke dalam objek Walaupun fungsi panggil balik ditetapkan, tidak dapat dinafikan bahawa antara muka beban direka dengan bijak dan mudah digunakan. Berikut ialah contoh: Tunjukkan penggunaan antara muka Muatkan:
fungsi beban():
Pengenalan fungsi: muat(url, [data], [panggilan balik]) Nilai pulangan: jQuery
Perihalan parameter:
url: URL halaman web HTML untuk dimuatkan.
data: (parameter pilihan) data kunci/nilai dihantar ke pelayan.
panggil balik: (parameter pilihan) fungsi panggil balik apabila pemuatan berjaya.
Contoh demonstrasi diberikan di bawah:
Mula-mula buat fail test.html yang perlu dimuatkan:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax演示</title>
</head>
<body>
脚本之家(www.jb51.net),提供大量脚本及素材供大家下载!
</body>
</html>
Salin selepas log masuk
Kemudian buat fail ajax.html dan ingat untuk memperkenalkan jquery.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#result").load("test.html",function(responseText,textStatus){
$("#display").append("<hr>responseText:"+responseText);
$("#display").append("<hr>textStatus:"+textStatus);
});
});
});
</script>
</head>
<body>
<input type="button" value="测试" id="btn" />
<h2>显示的内容如下：</h2>
<div id="result"></div>
<h2>结果：</h2>
<div id="display"></div>
</body>
</html>
Salin selepas log masuk
Contoh di atas menunjukkan cara menggunakan kaedah Muat.
Petua:
① Kita mesti sentiasa memberi perhatian kepada caching penyemak imbas Apabila menggunakan kaedah GET, kita mesti menambah parameter cap waktu (net Date()).getTime() untuk memastikan URL yang dihantar adalah berbeza setiap kali untuk mengelakkan cache penyemak imbas.
② Apabila ruang ditambahkan selepas parameter url, seperti " ", ralat "simbol tidak dikenali" akan muncul dan permintaan masih boleh dihantar secara normal Namun, HTML tidak boleh dimuatkan ke dalam DOM diselesaikan selepas memadamkannya.
2. kaedah post()
Ajax dalam jquery mempunyai dua mod penghantaran data, satu ialah get(), yang disebut dalam artikel sebelumnya, dan satu lagi ialah post(). Izinkan saya memperkenalkannya kepada anda sekali lagi. Rakan-rakan yang ingin mengetahui lebih lanjut boleh merujuknya.
Pertama sekali, anda perlu tahu jQuery.post(url, [data], [panggilan balik], [type])
Terangkan parameter:
url: Hantar alamat permintaan.
data: Parameter kunci/nilai untuk dihantar.
panggil balik: fungsi panggil balik apabila menghantar berjaya.
jenis: Kembalikan format kandungan, xml, html, skrip, json, teks, _default.
Penerangan:
Muat maklumat melalui permintaan HTTP POST jauh.
Ini ialah fungsi permintaan POST yang mudah untuk menggantikan kompleks $.ajax. Fungsi panggil balik boleh dipanggil apabila permintaan berjaya. Jika anda perlu melaksanakan fungsi pada ralat, gunakan $.ajax.
Mari kita lihat contoh mudah dahulu
$_POST[ 'nama']));?>
Kemudian buat fail ajax.html, perhatikan kod js:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("#sub").click(function(){
$.post("testPost.php",{name:$("#name").val()},function(data,textStatus){
$("#result").append("data:"+data.name);
$("#result").append("<br>textStatus:"+textStatus);
},"json");
return false;
});
});
</script>
</head>
<body>
<form action="testPost.php" method="post">
<input type="text" name="name" id="name" >
<input type="submit" id="sub" value="提交">
</form>
<h2>显示的内容如下：</h2>
<div id="result"></div>
</body>
</html>
Salin selepas log masuk
Penggunaan 2: (Klik data siaran untuk mengembalikan data)
<input type="button" id="bnajax" value="ajax" onclick="ajaxTest()" />
<script type="text/javascript" >
function ajaxTest()
{
$.post("http://localhost:8012/t.asp", { "txt": "123" },function(data)
{
$("#divMsg").html(data);
}
);
}
</script>
Salin selepas log masuk
Contoh 3
Kod JS:
<script>
$(document).ready(function(){
$(".ajax_btn").click(function(){
$.post("ajax.php",//异步处理动态页面
{name:$(".name").val()},//获取类名为"name"文本的值，以NAME异步传值
function(data){//data为反回值，function进行反回值处理
$(".content").val(data);//获得得反回值后，将其填入到类名为"content"的文本框中
});
})
})
</script>
Salin selepas log masuk
kod ajax.php:
<?php
$name=$_POST["name"];
if($name=="netxu"){
echo "对不起，".$name."数据存在";
}
else{
echo "恭喜你，".$name."可以使用";
}
?>
Salin selepas log masuk
Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
