jQuery ajax 异步请求

Posted The snail

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 - 同时您能够把这些外部数据直接载入网页的被选元素中。

技术图片 如果没有 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. 功能:

    • 用户输入账号密码完毕

    • 点击【提交】按钮完毕

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

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

  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>

     

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

  1. 场景:异步刷新用户列表界面

  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>

以上是关于jQuery ajax 异步请求的主要内容,如果未能解决你的问题,请参考以下文章

jquery 之ajax,get,post异步请求简单代码模版

AJAX中同步和异步的区别和使用场景

jQuery ajax 异步请求

Ajax(jquery) 同时处理多个异步请求

Ajax异步请求

019-JQuery(Ajax异步请求)