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

4.1、定义和用法

AJAX即“Asynchronous Javascript And XML”(异步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、其他参数如下:

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

dataType,类型:String

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

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

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="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;
    });
});
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值