码迷,mamicode.com
首页 > Web开发 > 详细

jq中的ajax合集总结

时间:2018-03-22 15:02:51      阅读:322      评论:0      收藏:0      [点我收藏+]

标签:异步刷新   person   示例   操作符   获取   username   ajax   合集   ogr   

 

参考原文

 

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合集总结

标签:异步刷新   person   示例   操作符   获取   username   ajax   合集   ogr   

原文地址:https://www.cnblogs.com/xiaoxiaoyao/p/8623810.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!