jQuery 中 ajax 方法使用（测试get和post请求方式）

一、jQuery 中 ajax 方法使用

• async：默认设置下，所有请求均为异步请求。

• contentType：发送信息至服务器时内容编码类型，默认为 "application/x-www-form-urlencoded"。

• data：发送到服务器的数据，可以为对象或者 Key=value 格式字符串，若为对象则会自动转换为请求字符串格式。

• type：默认: "GET"，其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但取决浏览器支持。

• url：发送请求的地址，默认当前页地址。

• dataType：预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME类型就被识别为 XML，可以不填，可用值："xml"、"html"、"script"、"json"、"jsonp"、"text"。

• cache：默认为 true（dataType 为 script 和 jsonp 时默认为 false，设置为 false 将禁用缓存。

• context：这个对象用于设置 AJAX 相关回调函数的上下文。也就是说，让回调函数内 this 的指向（若不指定为当前选项）。

• beforeSend：发送请求前调用此函数，可用与如添加自定义 HTTP 头，检查请求参数是否合法。XMLHttpRequest 对象是唯一的参数。若在函数中返回 false 可以取消本次请求。

function (XMLHttpRequest) {
    // this 默认情况下调用本次 AJAX 请求时传递的 option 对象
}

• success：请求成功后的回调函数，参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。

function (data, textStatus) {
    // data 可能是 xmlDoc, jsonObj, html, text, 等等
    

• error：请求失败时调用此函数。有以下三个参数：XMLHttpRequest 对象、错误信息、捕获的异常对象。

function (XMLHttpRequest, textStatus, errorThrown) {
}

例如：

$.ajax({
    url: 'url',
    type: 'GET',
    data: {username:'zs', password:'12345'},
    success: function(data){
        // 请求成功业务逻辑
    }
});

二、使用 jQuery 发送 GET 方式 AJAX 请求

2.1、使用.ajax()方法

$("#obtn").click(()=>{
    $.ajax({
        url:'/get_data',
        data:{name:"nodejs"},
        type:"GET",
        success: function(data){
            console.log(data)
        }
    });
})

2.2、使用.get()方法

• url：请求 URL 地址

• data：请求参数。

• callback：请求成功时回调函数。

• type：预期服务器返回的数据类型。

$.get('/get_data', {name:'nodejs', age:11}, function(data){
     //请求成功的业务逻辑(成功之后的操作)
});

三、使用 jQuery 发送 POST 方式 AJAX 请求

3.1、使用.ajax()方法

$.ajax({
    url:"/login_post",
    type:"POST",
    data: {username:$("#username").val(), password:$("#password").val()},
    success:(data)=>{
        console.log(data);
    }
});

3.2、使用.post()方法

• url：请求 URL 地址

• data：请求参数。

• callback：请求成功时回调函数。

• type：预期服务器返回的数据类型。

$.post('url', {username:$("#username").val(), password:$("#password").val()}, function(data){
    // 请求成功业务逻辑
    console.log(data);
});