jQuery ajax 异步请求

gengyufei

jQuery - AJAX 简介

AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。

 

什么是 AJAX？

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

 

关于 jQuery 与 AJAX

jQuery 提供多个与 AJAX 有关的方法。

通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

lamp 如果没有 jQuery，AJAX 编程还是有些难度的。

 

编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。

 

jQuery对ajax的支持

$(json_arr).each()

方法1：jQuery遍历json数组

// 语法
$(json_arr).each(function(index, obj){
    index:遍历出来的元素的下标;
    obj：遍历出来的元素;
});

 

$.each(json_arr, function(i, obj)

方法2：jQuery遍历json数组

//利用全局数组
$.each(json_arr, function(i, obj){
    index:遍历出来的元素的下标;
    obj：遍历出来的元素;
    json_arr:js的json普通数组
    console.log(\'unma:\'+obj.uname);
});


$obj.load()


作用


把指定URL的HTML内容 加载到指定的元素中


语法


　　




$obj.load(url, data, callback)
    $obj:显示内容的元素（HTML元素）
    url:请求地址
    data:向url传入的参数【可选择】
        方式1(GET请求)：
            查询字符串：key=value&key1=value1...
        方式2（POST请求）:
            使用js对象/JSON对象
            {"name":"gengyufei"}
    【注意】：不传参数时，默认get请求
    callback:响应成功回调该函数【可选择】




 


 


$.get()


作用：


通过get方式异步的向远程地址发送请求




$.get(url, data, callback, type)
    url:请求地址
    data:传递到服务器端的参数
        1、字符串："name=geng&age=18"
        2、js对象:
            {
                name:\'geng\',
                age:18
            }
    callback:响应成功后的回调函数
        // data:后端返回到前端的返回值
        eg:function(data){
            console.log(data)
        }
    type:响应回来的数据格式
        取值如下：
        1.html:响应回来的文本是html文本
        2.text：响应回来的文本是text文本
        3.script：响应回来的文本是js执行脚本
        4.json：响应回来的文本是json格式的文本




实例：




<head>
    // 引入jQuery
    <script type="text/javascript" src="{% static \'bootstrap-3.3.7/js/jquery-1.12.4.min.js\' %}"></script>
</head>
​
<body>
    <button id="btn">ajax_jquery_get</button>
    <div id="ajax_jquery_get_show"></div>
    <script>
        $(function () { // $(function ()作用：等待页面加载完毕，再执行js代码
            // 获取btn对象（按钮事件）
            $(\'#btn\').click(function () {
                // 主角出现：jQuery的get方法
                // $.get(url, data, 回调函数, type)
                $.get(\'/ajax/jquery_get_server/\', function (data) {
                    // 假装\'/ajax/jquery_get_server/\'该地址返回json字串：{"uname": "...", "age":"..."}
                    var msg = \'name is \' + data.uname;
                    msg += \'age is \' + data.age;
                    
                    // 在id=ajax_jquery_get_show的div元素内显示msg
                    // $(\'#id_html\').html(msg)作用：在id=id_html的html元素内，显示msg
                    $(\'#ajax_jquery_get_show\').html(msg);
                }, \'json\')
            })            
        })
    </script>     
</body>




 


$.post()


作用：


通过post方式异步的向远程地址发送请求




注意： post方式，参数：必须包含csrf_token!!!（这个是针对Django开发来讲的，如果是其他语言或者框架，另当别论）






$.get(url, data, callback, type)
    url:请求地址
    data:传递到服务器端的参数
        1、字符串："name=geng&age=18"
        2、js对象:
            {
                name:\'geng\',
                age:18
                csrf:
            }
    callback:响应成功后的回调函数
        // data:后端返回到前端的返回值
        eg:function(data){
            console.log(data)
        }
    type:响应回来的数据格式
        取值如下：
        1.html:响应回来的文本是html文本
        2.text：响应回来的文本是text文本
        3.script：响应回来的文本是js执行脚本
        4.json：响应回来的文本是json格式的文本




实例：




<head>
    // 引入jQuery
    <script type="text/javascript" src="{% static \'bootstrap-3.3.7/js/jquery-1.12.4.min.js\' %}"></script>
</head>
​
<body>
    {# $.post() #}    
    <div>
        name:<input type="text" id="input_name">
        age: <input type="text" id="input_age">
        <input type="submit" id="submit" value="提交">
    </div>
    <script>
        $(function () { // $(function ()作用：等待页面加载完毕，再执行js代码
            $(\'#submit\').click(function () {
​
                var data = {
                    name:$(\'#input_name\').val(),
                    age:$(\'#input_age\').val(),
                    // 关键点：没有csrf_token，会报错：403，forbidden
                    csrfmiddlewaretoken:$("[name=\'csrfmiddlewaretoken\']").val(),
                }
​
                // $.post(url, data, func, type)
                // 假装\'/ajax/jquery_get_server/\'该地址返回json字串：{"msg": "..."}
                $.post(\'/ajax/jquery_post_server/\', data, function (res) {
                    // alert :在浏览器弹窗，显示后端返回信息
                    alert(\'response msg is\'+ res.msg);
​
                }, \'json\')
​
            })
        })
​
    </script>
</body>




 


$.ajax()-终极模式（企业常用）


作用：


jQuery对ajax的终极支持！！！




# 最高频使用的8个参数：
参数对象中的属性：
    1.url:字符串，表示异步请求的地址
    2.type：字符串，请求方式：get或post
    3.data：传递到服务器端的参数
        1、字符串："name=geng&age=18"
        2、js对象:
            {
                name:\'geng\',
                age:18
                csrf:
            }
    4.dataType：字符串，响应回来的数据的格式
        1.\'html\'
        2.\'xml\'
        3.\'text\'
        4.\'script\'
        5.\'json\'
        6.\'jsonp\' //有关跨域的响应格式
    5.success：回调函数，请求和响应成功时，回来执行的操作
    6.error：回调函数，请求或响应失败时，回来执行的操作
    7.beforeSend：回调函数，发送ajax请求之前，执行的操作，如：return false，则终止请求
    8.async:是否为异步请求，true为异步，false为同步




 


语法：




$.ajax({
    url:\'\',
    type:\'get\'/\'post\',
    data:{
        name:\'\',
        csrfmiddlewaretoken:$("[name=\'csrfmiddlewaretoken\']").val(),
    },
    dataType:\'json\',
    success:function () {
                        
    },
    error:function(){
        
    },
    beforeSend:function(){
        
    },
})




 


实例：




$("button").click(function(){
    $.ajax({
        url:"demo_test.txt",
        type:\'post\',
        
        data:{
        name:\'\',
        csrfmiddlewaretoken:$("[name=\'csrfmiddlewaretoken\']").val(),
        },
        
        dataType:\'json\',
        
        success:function(result){
        $("#div1").html(result);
        },
        
        beforeSend:function(){
        
        },
    });
}); 




beforeSend经典用法：


    

  1. 

    场景：用户注册
    

    2. 

  2. 

    功能：
    

      

    • 

      用户输入账号密码完毕
      

      • 

    • 

      点击【提交】按钮完毕
      

      • 

    • 

      在网络传输过程中，网速慢的情况下，显示动画效果，等待服务器响应
      

      • 

    • 

      在网络传输过程中，网速慢的情况下，提交按钮变为灰色不可用状态，直到得到服务器响应
      

      • 

    

    3. 

  3. 

    代码实现：
    

    

    <head>
    // 引入jQuery
    <script type="text/javascript" src="{% static \'bootstrap-3.3.7/js/jquery-1.12.4.min.js\' %}"></script>
</head>
​
{# $.ajax()   #}
<body>
    <span id="loading" style="display: none">加载中...[我是动画]</span>
    <button id="btn">jquery ajax</button>
​
    <script>
        $(function () {
            $(\'#btn\').click(function () {
                $.ajax({
                    url: \'/ajax/jquery_ajax\',
                    type: \'post\',
                    data:{
                        csrfmiddlewaretoken: $("[name=\'csrfmiddlewaretoken\']").val(),
​
                    },
                    dataType:\'json\',
                    async:true,
​
                    success:function () {
                        // post 请求发送成功
                        $(\'#loading\').hide(3000); // 3秒内消失
                        // 弹框：登录成功
                        alert(\'登录成功\');
​
                        // 提交按钮改为可用状态
                        $(\'#btn\').removeAttr(\'disabled\');
​
                    },
​
                    error:function () {
​
                    },
​
                    beforeSend:function () {
                        // 发送前，do something
                        $(\'#loading\').show(); // 发送前，让等待元素span显示（show）
​
                        // 发送前，让button置灰，不可点击
                        $(\'#btn\').attr({disabled:\'disabled\'})
​
                    },
                })
            }) 
        })
    </script>
</body>
    

    

     
    

    4. 



经典用法：异步获取用户列表


    

  1. 

    场景：异步刷新用户列表界面
    

    2. 

  2. 

    实例：
    

    

    <head>
    // 引入jQuery
    <script type="text/javascript" src="{% static \'bootstrap-3.3.7/js/jquery-1.12.4.min.js\' %}"></script>
</head>
​
<body>
    <button id="btn">show data</button>
    <thead>
        <tr>
            <th>name</th>
            <th>age</th>
        </tr>
    </thead>
    <tbody id="show"></tbody>
​
    <script>
        $(function () {
            $(\'#btn\').click(function () {
                $.ajax({
                    url: \'/ajax/jquery_show\',
                    type: \'get\',
                    dataType: \'json\',
                    async: true,
                    data: {},
                    success: function (data) {
                        var html = \'\';
​
                        $.each(data, function (i, obj) {
                           html += \'<tr>\';
                            html += \'<td>\' + obj.name + \'</td>\';
                            html += \'<td>\' + obj.age + \'</td>\';
                           html += \'</tr>\';
                        });
                        $(\'#show\').html(html);  // 在id= show的html标签显示用户信息
                    },
​
                    error: function () {
​
                    },
​
                    beforeSend: function () {
​
                    },
                })
            })
        })
    </script>
</body>
    

    

    3. 






            

            
        

	    
	    
    


 
                    
            
                

                  
 
        

	 
        

            

                                
分类：
 
                                                                
技术点：

                                            

        

        
相关文章：

        

      
            
 
                    
    
                                            

               
   
         

    


  






 
          

    
猜你喜欢 

        
    
                        

   
 



    
相关资源 

        
    
              
                            

   

   
    

     
相似解决方案 

         
    
                          

    

  
   

    

 
   

    
热门标签  

    

                    Java
                        Python
                        linux
                        javascript
                        Mysql
                        C#
                        Docker
                        算法
                        前端
                        SpringBoot
                        Redis
                        Vue
                        spring
                        设计模式
                        .net core
                        .net
                        kubernetes
                        c++
                        数据库
                        数据结构
                        大数据
                        js
                        机器学习
                        微服务
                        Android
                        Go
                        程序员
                        面试
                        JVM
                        ASP.net core
                        云原生
                        人工智能
                        后端
                        PHP
                        git
                        CSS
                        golang
                        k8s
                        Nginx
                        Django
                        mybatis
                        深度学习
                        多线程
                        React
                        架构
                        devops
                        爬虫
                        云计算
                        Spring Boot
                        LeetCode