首页 > 代码库 > Ajax最详细的参数解析和场景应用

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

4.1、定义和用法
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。
 ajax请求的常用的5个步骤如下:1.创建 XMLHTTPRequest对象;2.注册回调函数;3.设置和服务器端的连接信息;4.发送数据;5.接受响应数据
4.2、写法示例
该参数规定 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.3、其他参数如下:

技术分享

dataType,类型:String
预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML。在 1.4 中,JSON 就会生成一个 JavaScript 对象,而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:
技术分享
 contentType,发送请求数据类型
技术分享
 
4.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="http://www.mamicode.com/check1"/> check1
  <input type="checkbox" name="check" value="http://www.mamicode.com/check2" checked="checked"/> check2
  <input type="radio" name="radio" value="http://www.mamicode.com/radio1" checked="checked"/> radio1
  <input type="radio" name="radio" value="http://www.mamicode.com/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=http://www.mamicode.com/"提交"></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
 
 

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