Jquery的$.ajax、$.get、$.post发送、接收JSON数据及回调函数用法

平时研究代码时，经常会遇到AJAX的相关用法，做项目时才真正体会到Ajax的强大之处（与服务器数据交互如此之便捷，更新DOM节点而不用刷新整个页面），以及运用的频繁程度。今天整理了一下自己之前没搞清楚的地方以及一些常规用法。

首先不得不说数据格式，ajax接收返回数据时，必须将获取到的json数组反序列化为json对象。

{"result": "hello, jenny"}              //json数组
Object { result: "hello, jenny" }    //json对象

调试时，console.log(data), 其中‘data’为ajax返回数据，若显示的为第一个格式，即为json数组，此时通过jquery改变某个DOM的值是不会有效果的，但是也不会有错误提示。初学者可能比较崩溃。。

var json_object = jQuery.parseJSON(json_str);

此时，如上代码，即可转换为JSON对象，此时再将返回值赋予某个DOM即可实现效果。

下面就引出jQuery中发送Ajax请求的几个常见方法。

$.ajax()

形式：$.ajax({url,data,type,...});
可选字段：
1）url：链接地址，字符串表示
2）data：需发送到服务器的数据，GET与POST都可以，格式为{A: '...', B: '...'}
3）type："POST" 或 "GET"，请求类型
4）timeout：请求超时时间，单位为毫秒，数值表示
5）cache：是否缓存请求结果，bool表示
6）contentType：内容类型，默认为"application/x-www-form-urlencoded"
7）dataType：服务器响应的数据类型，字符串表示；当填写为json时，回调函数中无需再对数据反序列化为json
8）success：请求成功后，服务器回调的函数
9）error：请求失败后，服务器回调的函数
10）complete：请求完成后调用的函数，无论请求是成功还是失败，都会调用该函数；如果设置了success与error函数，则该函数在它们之后被调用
11）async：是否异步处理，bool表示，默认为true；设置该值为false后，JS不会向下执行，而是原地等待服务器返回数据，并完成相应的回调函数后，再向下执行
举例：【后端代码见最下方】

<button class="btn btn-default" id="button1">发送1</button>
<div id="ret">abc</div>

    $("#button1").on('click',function(){
        $.ajax({
            url: "/greet",
            data: {name: 'jenny'},
            type: "POST",
            //dataType: "json",
            success: function(data) {
                console.log(data);
                data = jQuery.parseJSON(data);  // dataType注释了，故需要转换为JSON对象
                console.log(data);
                $("#ret").text(data.result);
            }
        });
    });

笔者推荐大家用这种写法，虽然比$.post、$.get写起来稍微麻烦一点，但是它被称为"jQuery中Ajax系列方法之母"，原因在于可以很方便得实现各项其他配置，比如设置同步处理、设置success回调函数等。其中ajax的success和error方法根据响应状态码来触发。当服务器的链接相应成功，即状态码为200的时候，表示响应成功，此时自动触发success().其他状态码则触发error()。$.post和$.get对于success和error的支持，写起来就没有$.ajax这么简单。

$.post()

该方法使用POST方式执行Ajax请求，从服务器加载数据。

形式：$.post(url, data, func, dataType);
可选参数：
1）url：链接地址，字符串表示
2）data：需要发送到服务器的数据，格式为{A: '...', B: '...'}
3）func：请求成功后，服务器回调的函数；function(data, status, xhr)，其中data为服务器回传的数据，status为响应状态，xhr为XMLHttpRequest对象，个人感觉关注data参数即可
4）dataType：服务器返回数据的格式
举例：

<button class="btn btn-default" id="button2">发送2</button>
<div id="ret">abc</div>

 $("#button2").on('click',function(){
　　　 //$.ajaxSettings.async = false;　 //flase 表示同步处理，即等待回调函数执行完毕之后，再执行ajax代码块下面的JS代码，而不是同时执行
        $.post(
            "{{ url_for('greet') }}",
            {name: 'Brad'},
            function(data) {
                $('#ret').text(data.result);
            },
            "json"
        );
    });

注意“json”的返回格式，也可以不写，如果不写，就必须先将返回数据转化为JSON对象才可以使用。

$.get()

该方法使用GET方式执行Ajax请求，从服务器加载数据。

形式：$.get(url, data, func, dataType);
其各个参数所示意义与$.post()一致，在此不再列出，唯一区别就是请求类型是GET。

举例：

<button class="btn btn-default" id="button3">发送3</button>
<div id="ret">abc</div>

    $("#button3").on('click',function(){
        $.get(
            "{{ url_for('greet') }}",
            {name: 'Brad'},
            function(data) {
                $("#ret").text(data.result);
            },
            "json"
        );
    });

$.getJSON()

该方法使用GET方式执行Ajax请求，从服务器加载JSON格式数据。

形式：$.getJSON(url, data, func);

因为确定服务器返回json编码的数据，故相较于$.get()不必再指定dataType。

<button class="btn btn-default" id="button4">发送4</button>
<div id="ret">abc</div>

    $("#button4").on('click',function(){
        $.getJSON(
            "{{ url_for('greet') }}",
            {name: 'jenny'},
            function(data) {
                $("#ret").text(data.result);
            }
        );
    });

比较常用的还有$.load、$.getScript()等。

后端代码（Python的Flask框架）：

import json
from flask import Flask, request, render_template as rt

@app.route('/greet', methods=['GET', 'POST'])
def greet():

    # GET上传的数据用request.args获取，POST上传的数据用request.form获取
    if request.method == 'GET':
        name = request.args.get('name')
        ret = {'result': 'hi, %s' % name}
    else:
        name = request.form.get('name')
        ret = {'result': 'hello, %s' % name}

    return json.dumps(ret)

文章中如有不正确之处，请交流指出，wx:offer555

感兴趣的朋友也可以扫描关注我的公众号，里面有很多笔者原创的技术文章，希望大家会喜欢:）