Ajax最详细的参数解析和场景应用

4.一、定义和用法

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种建立交互式 网页应用的网页开发技术。

AJAX = 异步  JavaScript和 XML（ 标准通用标记语言的子集）。

AJAX 是一种用于建立快速动态网页的技术。

经过在后台与服务器进行少许数据交换，AJAX 可使网页实现异步更新。这意味着能够在不从新加载整个网页的状况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）若是须要更新内容，必须重载整个网页页面。

 ajax请求的经常使用的5个步骤以下：1.建立 XMLHTTPRequest对象；2.注册回调函数;3.设置和服务器端的链接信息;4.发送数据;5.接受响应数据

4.二、写法示例

该参数规定 AJAX 请求的一个或多个名称/值对。

$.ajax({})的第一种写法,success(),error()

$.ajax({
    type: "post", 【以POST或GET的方式请求。默认GET。PUT和DELETE也能够用，有的浏览器不支持】
    url: url,   【请求的目的地址，须是一个字符串。】
    contentType: "application/json",       【以哪一种数据类型发送请求】
    data: data,    【请求的数据】
    dataType: "json",  【想从服务器获得的数据类型。html,json,jsonp,text】
    async:false,【默认为true异步请求，设置为false时为同步请求】
    beforeSend:function(){......},  【传递异步请求以前的事件】
    success:function(){......},  【请求成功以后的回调】
    error:function(){......},    【请求失败以后的回调】
    complete(function(){......},  【无论请求成功仍是错误，只要请求完成，能够执行的事件。】 
});

 $.ajax({})的第二种写法,总结为回调写法.done(),.fail()

 $.ajax({
      type: "post",
      url: url,
      contentType: "application/json",
      data: '{ "requestData": { "SysId": 1, "SysType": "rzrq"}}',
      dataType: "json",
}).done(function (data) {
      console.log(JSON.parse(data));
      eventManger.trigger("showMergeLiCategorySuccess", data);
}).fail(function (msg) {
      console.log(JSON.parse(msg));
      eventManger.trigger("requestFailure", msg);
});

4.三、其余参数以下：

dataType,类型：String

预期服务器返回的数据类型。若是不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，好比 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后 服务器端返回的数据会根据这个值解析后，传递给 回调函数。可用值:

 contentType，发送请求数据类型

 

4.四、用ajax实现表单提交

<form id="formTest">
   <select name="single">
　　　　<option>Single</option>
　　　　<option>Single2</option>
　　</select>
　　<select name="multiple" multiple="multiple">
　　　　<option selected="selected">Multiple</option>
　　　　<option>Multiple2</option>
　　　　<option selected="selected">Multiple3</option>
　　</select>
　　<input type="checkbox" name="check" value="check1"/> check1
　　<input type="checkbox" name="check" value="check2" checked="checked"/> check2
　　<input type="radio" name="radio" value="radio1" checked="checked"/> radio1
　　<input type="radio" name="radio" value="radio2"/> radio2
</form>

那么用jQuery来作Ajax提交就这样

$(function() {
    $('#submit').click(function() {
        $.ajax({
            url: '你的提交url地址',
            type: 'post',
            dataType:'json'
            data: $("#formTest").serializeArray(),//serializeArray方法会自动将表单转换为json对象
            success: function(msg) {
            }
        });
    });
}); 

// 好比你有以下的html结构

<form>
    ...
    <input type="submit" id="submit" value="提交">
</form>

// jquery代码

$(function () {
    $('#submit').click(function () {
        $.ajax({
            url: '',
            method: 'post',
            data: {},
            success: function (msg) {
            }
        });
        // 别忘记了这句
        return false;
    });
});

 

参考文档： http://www.w3school.com.cn/jquery/ajax_ajax.asp