jQuery - AJAX load() method

jQuery load() method

The load() method loads data from the server and puts the returned data into the selected element.

Syntax:

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

The required URL parameter specifies the URL you wish to load.

The optional data parameter specifies the set of query string key/value pairs sent with the request.

The optional callback parameter is the name of the function executed after the load() method is completed.

This is the content of the sample file ("demo_test.txt"):

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

Load the content of the file "demo_test.txt" into the specified <div> element:

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

You can also add jQuery selectors to URL parameters.

The example loads the content of the element with id="p1" in the "demo_test.txt" file into the specified <div> element:

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

The optional callback parameter specifies when The callback function to be allowed after the load() method completes. The callback function can set different parameters:

responseTxt - Contains the result content when the call is successful

statusTXT - Contains the status of the call

xhr - Contains the XMLHttpRequest object

The following example will display a prompt box after the load() method is completed. If the load() method has succeeded, "External content loaded successfully!" is displayed, and if it fails, the error message is displayed:

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

Complete example:

First create a text.html file:

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

Create another Write an HTML file (the name can be arbitrary) into jQuery AJAX load() method:

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

Continuing Learning

new file

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

submit Reset Code

Automatic operation

jQuery - AJAX load() method

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]