jquery接触初级-----ajax 之：load()方法

jquery _ajax 请求主要有几种方式：load(),$.get(),$.post(),$.ajax(),$.getScript(),$.getJson()

1.load()方法

格式：load( url,[,data],[,function] ) // 参数加上括号，表示参数是可选参数

1.1 写一个文件：test.html

 <div class="containt">

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

 </div>

1.2 写一个添加文件：tiajia.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

     <title>Document</title>

     <script>

         $(function() {

             $("#send").click(function() {

                 $("#resText").load("test.html");

             });

         });

     </script>

 </head>

 <body>

     <input type="button" id="send" value="ajax获取">

     <div class="comment">已有评论：</div>

     <div id="resText"></div>

 </body>

 </html>

打开文件：http://localhost/aaa/tiajia.html

F12 键查看网页代码：发现把整个网页都加载进来了，包括meta标签，这似乎不是我们想要的

在加载函数 load 里加入选择器标签，可以达到只加载需要的行的效果：在要加载的文件后面跟上选择器，就ok了

     <script>

         $(function() {

             $("#send").click(function() {

                 $("#resText").load("test.html .containt");

             });

         });

     </script>

1.3 load(url,function(reponseText,textStatus,XMLHttpRequest){ .... });

reponseText ：是回调函数返回的值

textStatus：是回调函数的执行结果，有四种结果：success，error，not modified，timeout

XMLHttpRequest：是XMLHttpRequest 对象

 <script>

         $(function() {

             $("#send").click(function() {

                 $("#resText").load("test.html .containt", function(reponseText, textStatus, XMLHttpRequest) {

                     console.log(typeof reponseText);

                     console.log(reponseText);

                 });

             });

         });

 </script>

点击后结果：

输出textStatus 和XMLHttpRequest 对象：

  <script>

         $(function() {

             $("#send").click(function() {

                 $("#resText").load("test.html .containt", function(reponseText, textStatus, XMLHttpRequest) {

                     console.log(textStatus);

                     console.log(XMLHttpRequest);

                 });

             });

         });

 </script>

结果：

变更url 为一个不存在的文件 test1.html

 <script>

         $(function() {

             $("#send").click(function() {

                 $("#resText").load("test1.html .containt", function(reponseText, textStatus, XMLHttpRequest) {

                     console.log(textStatus);

                     console.log(XMLHttpRequest);

                 });

             });

         });

 </script>

运行结果：没有载入成功，这样就通过判断执行状态，确认是否载入文件成功了

另外：

1. load()方法，无论是否载入成功，都会执行回调函数

2. 当load()方法中传递data参数时，调用post方法进行传值，当没有data参数时，调用的是get方法

巴特西

jquery接触初级-----ajax 之：load()方法

最新文章

热门文章