jq中的ajax合集总结

Posted 2020-10-28 xiaoxiaoyao

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jq中的ajax合集总结相关的知识，希望对你有一定的参考价值。

参考原文

jq中关于ajax的方法很多

技术分享图片

重点关注打红点的几个

1、首先说说$,ajax(),

其实后面要讲到的$.get(),$.post()等等都是基于$.ajax()的，都可以改写成$.ajax()的形式，

技术分享图片

示例：

html:

 1 <html>
 2     <head>
 3         <meta charset="UTF-8">
 4         <title>$.ajax()方法</title>
 5         <script src="../js/jquery-3.2.1.js"></script>
 6             <script>
 7             $(function(){
 8                 $(".btn").click(function(){
 9                     $.ajax({url:"111的请求数据.txt",success:function(result){
10                         $("p").html(result);
11                         }
12                     })
13                 })
14             })
15         </script>
16     </head>
17     <body>
18         <p>这是刷新前的文本</p>
19         <input type="button" class="btn" value="点击实现异步刷新功能">
20     </body>
21 </html>

对应的请求数据（一段文本）：

AJAX is not a programming language.
It is just a technique for creating better and more interactive web applications.

2、$.get()方法

技术分享图片

html代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <script src="../js/jquery-3.2.1.js"></script>
 6         <script>
 7             $(function(){
 8                 $("#btn").click(function(){
 9                     $.get("222请求的数据.html",function(data){
10                         $("#ul1 li").append(data);
11                         
12                     })
13                 })
14             })
15         </script>
16         <title></title>
17     </head>
18     <body>
19         <ul id="ul1">
20             <li>黄鹤楼</li>
21         </ul>
22         <button id="btn">click me</button>
23     </body>
24 </html>

请求数据代码：

<li>故人西辞黄鹤楼</li>
<li>烟花三月下扬州</li>
<li>孤帆远影碧空尽</li>
<li>唯见长江天际流</li>

3、$.getJSON方法：

技术分享图片

html代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <script src="../js/jquery-3.2.1.js"></script>
 6         <script>
 7             $(function(){
 8                 $("#btn1").click(function(){
 9                     $.getJSON("333请求的数据.json",function(data){
10                         //因为是json的格式，所以用点操作符，来一步一步获取指定的数据
11                         $(".div1 p").html(data.person1.name)            
12                     })
13                 })
14             })
15         </script>
16     </head>
17     <body>
18         <button id="btn1">click me </button>
19         <div class="div1" style="width:300px;height:200px;border: 1px solid red;">
20             <span>请求结果第一个人的姓名是：</span><br />
21             <p></p>
22         </div>
23     </body>
24 </html>

JSON代码

 1 {
 2     "person1":{
 3             "name":"haha",
 4             "age":21,
 5             "city":"wuhan"
 6         },
 7     "person2":{
 8             "name":"xiaxiaoyao",
 9             "age":23,
10             "city":"beijing"
11         },
12     "person3":{
13             "name":"en",
14             "age":2,
15             "city":"shenzhen"
16         }
17 }

4、用$.ajax()改写其它几个方法

　　例如，可以使用下面的jQuery代码代替$.getScript方法：

1 $(function(){
2     $(‘#send‘).click(function() {
3         $.ajax({
4             type: "GET",
5             url: "test.js",
6             dataType: "script"
7         }); 
8     });
9 });

再例如，可以使用以下jQuery代码来代替$.getJSON()方法：

$(function(){
    $(‘#send‘).click(function() {
        $.ajax({
            type: "GET",
            url: "test.json",
            dataType: "json",
            success : function(data){
                $(‘#resText‘).empty();
                var html = ‘‘;
                $.each( data  , function(commentIndex, comment) {
                    html += ‘<div class="comment"><h6>‘ + comment[‘username‘] + ‘:</h6><p class="para">‘ + comment[‘content‘] + ‘</p></div>‘;
                });
                $(‘#resText‘).html(html);
                $(‘#resText‘).val(html);
            }
        }); 
    });
});

5、$.getScript方法

点我查看

以上是关于jq中的ajax合集总结的主要内容，如果未能解决你的问题，请参考以下文章

十条jQuery代码片段助力Web开发效率提升

jq的ajax方法