jQuery load() kaedah


kaedah jQuery - AJAX load()

kaedah jQuery load()

kaedah jQuery load() Merupakan kaedah AJAX yang mudah tetapi berkuasa. Kaedah

load() memuatkan data daripada pelayan dan meletakkan data yang dikembalikan ke dalam elemen yang dipilih.

Sintaks:

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

Parameter URL yang diperlukan menyatakan 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.

Ini ialah kandungan fail sampel ("demo_test.txt"):

<h2>jQuery AJAX ialah ciri yang hebat! </h2>

<p id="p1">Ini ialah beberapa teks perenggan. </p>

Contoh berikut akan memuatkan kandungan fail "demo_test.txt" ke dalam elemen <div> yang ditentukan:

Contoh

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<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");
	});
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div>
<button>获取外部内容</button>

</body>
</html>

Jalankan contoh»

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

Anda juga boleh menambah jQuery pemilih kepada parameter URL.

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

Contoh

<!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>

Jalankan instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Parameter panggil balik pilihan menentukan apabila load( ) fungsi panggil balik untuk membenarkan selepas kaedah selesai. Fungsi panggil balik boleh menetapkan parameter yang berbeza:

responseTxt - Mengandungi kandungan hasil apabila panggilan berjaya statusTXT - Mengandungi status panggilan xhr - Mengandungi objek XMLHttpRequest

Contoh berikut akan selesai dalam kaedah load() Kotak gesaan kemudian dipaparkan. Jika kaedah load() telah berjaya, "Kandungan luaran berjaya dimuatkan dipaparkan dan jika ia gagal, mesej ralat dipaparkan:

Instance

<!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",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert("外部内容加载成功!");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 修改该文本</h2></div>
<button>获取外部内容</button>

</body>
</html>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian