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

jQuery - kaedah AJAX load().

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]