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

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

1.load()方法

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

1.1 写一个文件：test.html

 1 <div class="containt">
 2     <div class="comment">
 3         <h6>张三：</h6>
 4         <p class="para">沙发。</p>
 5     </div>
 6     <div class="comment">
 7         <h6>李四：</h6>
 8         <p class="para">板凳。</p>
 9     </div>
10     <div class="comment">
11         <h6>王五：</h6>
12         <p class="para">地板。</p>
13     </div>
14 </div>

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 8     <title>Document</title>
 9     <script>
10         $(function() {
11             $("#send").click(function() {
12                 $("#resText").load("test.html");
13             });
14         });
15     </script>
16 </head>
17 <body>
18     <input type="button" id="send" value="ajax获取">
19     <div class="comment">已有评论：</div>
20     <div id="resText"></div>
21 </body>
22 </html>

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

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

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

1     <script>
2         $(function() {
3             $("#send").click(function() {
4                 $("#resText").load("test.html .containt");
5             });
6         });
7     </script>

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

reponseText ：是回调函数返回的值

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

XMLHttpRequest：是XMLHttpRequest 对象

 1 <script>
 2         $(function() {
 3             $("#send").click(function() {
 4                 $("#resText").load("test.html .containt", function(reponseText, textStatus, XMLHttpRequest) {
 5                     console.log(typeof reponseText);
 6                     console.log(reponseText);
 7                 });
 8             });
 9         });
10 </script>

点击后结果：

输出textStatus 和XMLHttpRequest 对象：

 1  <script>
 2         $(function() {
 3             $("#send").click(function() {
 4                 $("#resText").load("test.html .containt", function(reponseText, textStatus, XMLHttpRequest) {
 5                     console.log(textStatus);
 6                     console.log(XMLHttpRequest);
 7                 });
 8             });
 9         });
10 </script>

结果：

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

 1 <script>
 2         $(function() {
 3             $("#send").click(function() {
 4                 $("#resText").load("test1.html .containt", function(reponseText, textStatus, XMLHttpRequest) {
 5                     console.log(textStatus);
 6                     console.log(XMLHttpRequest);
 7                 });
 8             });
 9         });
10 </script>

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

另外：

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

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

posted on 2018-01-12 17:31 huanying2015 阅读(156) 评论(0) 编辑收藏举报