jQuery发送Ajax请求

转自于：https://blog.csdn.net/jinixin/article/details/80042763

平时工作中一直有接触jQuery发送Ajax请求，发现其种类繁多，在此总结几种常见jQuery的Ajax方法。

概述

Ajax用于浏览器与服务器通信而无需刷新整个页面，服务器将不再返回整个页面，而是返回少量数据，通过JavaScript DOM更新一部分节点。期间数据传输可采用xml，json等格式，Ajax最早用于谷歌的搜索提示。

其实不刷新整个页面便可与服务器通信的方法有很多，比如Flash，Java applet，iframe等，但Ajax是目前最为常见的一种。

我们可以使用JavaScript扩展对象XMLHttpRequest实现Ajax，对于这种方法在这里不做介绍，下面直接了解jQuery实现Ajax的几种方法。

数据格式

浏览器与服务器之间传输数据所采用的格式，比较常见的有xml，html，text，json，jsonp等，目前json由于占用更小存储，且是JavaScript原生格式，因此很受欢迎。

当确定数据传输采用json格式后，下面就需要考虑序列化问题了。

网络中传输的都是文本字符串（其实是二进制比特流，这里方便理解），因此在向网络通道中写入数据时，都需要先序列化json对象为文本字符串。而从网络通道中读取数据时，都需要反序列化文本字符串为json对象。在Python中json.dumps用于序列化，json.loads用于反序列化。

如果确定数据格式是json，JS也需对服务器返回的数据进行反序列化，即把json样式的字符串变成json对象。

1.  
   var json_str = '{"result": "hello, world!"}';
2.  
   var json_object = eval("(" + json_str + ")"); // 法一，使用eval函数，注意括号
3.  
   var json_object = jQuery.parseJSON(json_str); // 法二，使用jQuery的parseJSON函数
4.  
    
5.  
   alert(json_object.result); // 反序列化成功，输出结果

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

$.ajax()

该方法用于执行Ajax请求，常用于其他jQuery Ajax方法不能完成的请求，也许我们可以把它称为"jQuery中Ajax系列方法之母"。

形式：$.ajax({name:val, name:val,...});
可选字段：
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不会向下执行，而是原地等待服务器返回数据，并完成相应的回调函数后，再向下执行
12）username：访问认证请求中携带的用户名，字符串表示
13）password：返回认证请求中携带的密码，字符串表示
不知道将最后两个放到data中去，是不是密码会以明文展示，因没有尝试过，这里不敢下结论。

举例：

1.  
   $.ajax({
2.  
   url: "/greet",
3.  
   data: {name: 'jenny'},
4.  
   type: "POST",
5.  
   dataType: "json",
6.  
   success: function(data) {
7.  
   // data = jQuery.parseJSON(data); //dataType指明了返回数据为json类型，故不需要再反序列化
8.  
   ...
9.  
   }
10.  
    });

$.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：服务器返回数据的格式

举例：

1.  
   $.post(
2.  
   "/greet",
3.  
   {name: 'Brad'},
4.  
   function(data) {
5.  
   ...
6.  
   },
7.  
   "json"
8.  
   );

$.get()

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

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

举例：

1.  
   $.get(
2.  
   "/greet",
3.  
   {name: 'Brad'},
4.  
   function(data) {
5.  
   ...
6.  
   },
7.  
   "json"
8.  
   );

上面三个是jQuery中发送Ajax请求较为重要的方法，下面再选择三个较为常见的方法，简单做解释。

$.getJSON()

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

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

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

举例：

1.  
   $.getJSON(
2.  
   "/greet",
3.  
   {name: 'jenny'},
4.  
   function(data) {
5.  
   ...
6.  
   }
7.  
   );

$.load()

该方法将服务器加载的数据直接插入到指定DOM中。

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

其中data如果存在则使用POST方式发送请求，不存在则使用GET方式发送请求。

举例：

1.  
   <div id="ret"></div>
2.  
   $('#ret').load(
3.  
   "/greet",
4.  
   {name: 'Brad'}
5.  
   );

$.getScript()

该方法使用GET方式执行Ajax请求，从服务器加载并执行回传的JavaScript。

形式：$.load(url, func);

代码

下面使用Python Flask与jQuery对这6个Ajax方法做简单演示，jQuery为1.11.3版本。

后端Python：

1.  
   #!/usr/bin/env python
2.  
   # coding=utf-8
3.  
    
4.  
   import json
5.  
   from flask import Flask, request, render_template as rt
6.  
    
7.  
   app = Flask(__name__)
8.  
    
9.  
    
10.  
    @app.route('/', methods=['GET'])
11.  
    def index():
12.  
    return rt('greet.html')
13.  
     
14.  
     
15.  
    @app.route('/greet', methods=['GET', 'POST'])
16.  
    def greet():
17.  
    # GET上传的数据用request.args获取，POST上传的数据用request.form获取
18.  
    if request.method == 'GET':
19.  
    name = request.args.get('name')
20.  
    ret = {'result': 'hi, %s' % name}
21.  
    else:
22.  
    name = request.form.get('name')
23.  
    ret = {'result': 'hello, %s' % name}
24.  
     
25.  
    return json.dumps(ret)
26.  
     
27.  
     
28.  
    if __name__ == '__main__':
29.  
    app.run(debug=True)

前端：

1.  
   <html>
2.  
   <body>
3.  
   <button οnclick="login1()">发送1</button>
4.  
   <button οnclick="login2()">发送2</button>
5.  
   <button οnclick="login3()">发送3</button>
6.  
   <button οnclick="login4()">发送4</button>
7.  
   <button οnclick="login5()">发送5</button>
8.  
   <div id="ret"></div>
9.  
   <script type="text/javascript" src="{{ url_for('static', filename='jquery.min.js') }}"></script>
10.  
    <script type="text/javascript">
11.  
    function login1() {
12.  
    $.ajax({
13.  
    url: "{{ url_for('greet') }}",
14.  
    data: {name: 'jenny'},
15.  
    type: "POST",
16.  
    //dataType: "json",
17.  
    success: function(data) {
18.  
    // data = eval("(" + data+ ")");
19.  
    data = jQuery.parseJSON(data); // dataType注释了，故注意反序列化
20.  
    $("#ret").text(data.result);
21.  
    }
22.  
    });
23.  
    }
24.  
     
25.  
    function login2() {
26.  
    $.get(
27.  
    "{{ url_for('greet') }}",
28.  
    {name: 'Brad'},
29.  
    function(data) {
30.  
    $("#ret").text(data.result);
31.  
    },
32.  
    "json"
33.  
    );
34.  
    }
35.  
     
36.  
    function login3() {
37.  
    $.getJSON(
38.  
    "{{ url_for('greet') }}",
39.  
    {name: 'jenny'},
40.  
    function(data) {
41.  
    $("#ret").text(data.result);
42.  
    }
43.  
    );
44.  
    }
45.  
     
46.  
    function login4() {
47.  
    $.post(
48.  
    "{{ url_for('greet') }}",
49.  
    {name: 'Brad'},
50.  
    function(data) {
51.  
    $('#ret').text(data.result);
52.  
    },
53.  
    "json"
54.  
    );
55.  
    }
56.  
     
57.  
    function login5() {
58.  
    $('#ret').load(
59.  
    "{{ url_for('greet') }}",
60.  
    {name: 'Brad'}
61.  
    );
62.  
    }
63.  
     
64.  
    </script>
65.  
    </body>
66.  
    </html>

文中如有不当之处，还望包容和指出，感谢～