jQuery - kaedah AJAX load().

kaedah jQuery load()

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

Sintaks:

$(selector).load(URL,data,panggilan balik);

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.

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

<h2>jQuery AJAX 是个非常棒的功能！</h2>
<p id="p1">这是段落的一些文本。</p>

Muatkan kandungan fail "demo_test.txt" ke dalam <div> elemen:

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

Anda juga boleh menambah pemilih jQuery pada parameter URL.

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

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

Parameter panggil balik pilihan menentukan bila Fungsi panggil balik dibenarkan selepas 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 object

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

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

Contoh lengkap:

Buat fail text.html dahulu:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
  </head>
  <body>
      <div class="comment">
        已有评论：
      </div>
      <div class="comment">
        <h6>张三：</h6>
        <p class="para">沙发。</p>
      </div>
      <div class="comment">
        <h6>李四：</h6>
        <p class="para">板凳。</p>
      </div>
      <div class="comment">
        <h6>王五：</h6>
        <p class="para">地板。</p>
      </div>
  </body>
</html>

Cipta satu lagi Tulis fail HTML (nama boleh sewenang-wenangnya) ke dalam kaedah jQuery AJAX load():

<!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">
        $(document).ready(function(){
            $("#send").click(function(){
                $("#resText").load("text.html");  //引入text.html文件。
            });
        });
    </script>
</head>
<body>
    <input type="button" id="send" value="Ajax获取" />
    <div id="resText"></div>
</body>
</html>

Meneruskan pembelajaran

fail baharu

<!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"> $(document).ready(function(){ $("#send").click(function(){ $("#resText").load("text.html"); //引入text.html文件。 }); }); </script> </head> <body> <input type="button" id="send" value="Ajax获取" /> <div id="resText"></div> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik