Ajax的使用实例

Ajax的使用实例

ajax的一般格式

$.ajax({
    type: 'POST',
    url: url ,
    data: data ,
    async:true,
    dataType: dataType,
    function(data){

    }
});

$.ajax的参数描述：

参数	描述
type	必需,请求类型post或get请求
url	必需,规定把请求发送到哪个 URL。
data	可选,映射或字符串值。规定连同请求发送到服务器的数据。
async	可选,请求是否异步，默认为异步true
dataType	可选,规定预期的服务器响应的数据类型。
success	必需,请求成功时执行的回调函数。

html拼接方式传输

$.ajax({
    type: 'post',
    url: url + '?password2=' + password2,
    data: {},
    dataType: 'json',
    success: function (data) {

    }
}); 

json数组方式传输

$.ajax({
    url: url,
    data: {
        param1: param1,
        param2: param2,
        param3: param3,
        param4: param4
    },
    type: 'post',
    dataType: 'json',
    success: function (data) {

    }
});

form表单序列化方式传输

注意： 如果提交表单包含文件type=”file”的input是上传不了文件的

var formParam = $("#form1").serialize();//序列化表格内容为字符串  
$.ajax({
    type:'post',
    url:url,
    data:formParam,
    dataType:'json',
    success:function(data){

    }
}); 

jsonp跨域请求

注意：如果跨域请求的是js或json等今天文件可以直接请求获取，但请求的为后台数据需要后台设置允许跨域。

$.ajax({
    url : "https://api.douban.com/v2/book/search",
    type : "GET",
    dataType : "jsonp", // 返回的数据类型，设置为JSONP方式
    jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
    jsonpCallback: 'handleResponse', //设置回调函数名
    data : {
        q : "javascript",
        count : 1
    },
    success: function(response, status, xhr){
        console.log('状态为：' + status + ',状态是：' + xhr.statusText);
        console.log(response);
    }
});

//或

$.getJSON("https://api.douban.com/v2/book/search?q=javascript&count=1&callback=?", function(data){
    console.log(data);
});