返回顶部

jQuery ajax 异步请求

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. 







            

            
posted @ 
2020-03-28 10:12 
Be-myself 
阅读(1431) 
评论(0) 
编辑 
收藏 
举报


        

	    
	    
    









    
    

    
    

    

        

    

        

            
                
                
            
        

    

        

            
                
            
        

    

    

    



	

	

	
	

	

	

	





    

        
levels of contents

点击查看具体代码内容