jQuery发送Ajax请求的几种方式

概述

JQuery发送ajax请求的方法有很多，其中最基本的方法是$.ajax，在其中封装的方法有 $.get, $post等。我们分别举了不同的示例。

数据格式

首先，浏览器与服务器之间传输数据所采用的格式，比较常见的有json，jsonp，html，text，xml，等，目前由于json占用更小存储，并且是JavaScript原生格式，因此大家大部分的选择。

一：可选字段

1，url：链接地址，字符串表示

2，data：需发送到服务器的数据，GET与POST都可以，将自动转换为请求字符串格式，以 Key/value 的键值对形式表示，格式为{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：访问认证请求中携带的用户名，字符串表示

举例：

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

//ajax
$.ajax({
    url: "/greet",
    data: {name: 'name'},
    type: "Get",
    dataType: "json",
    success: function(data) {
        // data = jQuery.parseJSON(data);  //dataType指明了返回数据为json类型，故不需要再序列化
    }
});

//提交from数据
$.ajax({
    type : "POST",
    url : 'http://www.baidu.com',
    data : $("form").serialize(),    //不带文件的form表单
    success : function(data){
        console.log(data);
    }
});

//$.get方法
var params = {"username":"ceshiname","password":"123456"};
$.get("/demo",params,function(obj){
    console.log(obj);
},"json");

$.ajax({
    type : "GET",
    url : 'http://www.baidu.com',
    success : function(html){
       console.log(html);
    }
});

//$.post方法
var params={"username":"ceshiname","password":"123456"};
$.post("/demo",params,function(obj){
    console.log(obj);
},"json");

$.ajax({
    type : "POST",
    url : 'http://www.baidu.com',
    data : {query : "javascript"},
    contentType : "application/x-www-form-urlencoded",
    success : function(data){
       console.log(data);
    }
});