jquery发送ajax请求

Ajax用于浏览器与服务器通信而无需刷新整个页面,服务器将不再返回整个页面,而是返回少量数据,通过JavaScript DOM更新一部分节点。期间数据传输可采用xml,json等格式,Ajax最早用于谷歌的搜索提示。

其实不刷新整个页面便可与服务器通信的方法有很多,比如Flash,Java applet,iframe等,但Ajax是目前最为常见的一种。

我们可以使用JavaScript扩展对象XMLHttpRequest实现Ajax,对于这种方法在这里不做介绍,下面直接了解jQuery实现Ajax的几种方法。

浏览器与服务器之间传输数据所采用的格式,比较常见的有xml,html,text,json,jsonp等,目前json由于占用更小存储,且是JavaScript原生格式,因此很受欢迎。


当确定数据传输采用json格式后,下面就需要考虑序列化问题了。

网络中传输的都是文本字符串(其实是二进制比特流,这里方便理解),因此在向网络通道中写入数据时,都需要先序列化json对象为文本字符串。而从网络通道中读取数据时,都需要反序列化文本字符串为json对象。在Python中json.dumps用于序列化,json.loads用于反序列化。

如果确定数据格式是json,JS也需对服务器返回的数据进行反序列化,即把json样式的字符串变成json对象。
 


var json_str = '{"result": "hello, world!"}';
var json_object = eval("(" + json_str + ")");  // 法一,使用eval函数,注意括号
var json_object = jQuery.parseJSON(json_str);  // 法二,使用jQuery的parseJSON函数
 
alert(json_object.result);     

下面我们就来看看jQuery中发送Ajax请求的几个常见方法。

$.ajax()


该方法用于执行Ajax请求,常用于其他jQuery Ajax方法不能完成的请求,也许我们可以把它称为"jQuery中Ajax系列方法之母"。

形式:$.ajax({name:val, name:val,...});
可选字段:
1)url:链接地址,字符串表示
2)data:需发送到服务器的数据,GET与POST都可以,格式为{A: '...', B: '...'}
3)type:"POST" 或 "GET",请求类型
4)timeout:请求超时时间,单位为毫秒,数值表示
5)cache:是否缓存请求结果,bool表示
6)contentType:内容类型,默认为"application/x-www-form-urlencoded"
7)dataType:服务器响应的数据类型,字符串表示;当填写为json时,回调函数中无需再对数据反序列化为json
8)success:请求成功后,服务器回调的函数
9)error:请求失败后,服务器回调的函数
10)complete:请求完成后调用的函数,无论请求是成功还是失败,都会调用该函数;如果设置了success与error函数,则该函数在它们之后被调用
11)async:是否异步处理,bool表示,默认为true;设置该值为false后,JS不会向下执行,而是原地等待服务器返回数据,并完成相应的回调函数后,再向下执行
12)username:访问认证请求中携带的用户名,字符串表示
13)password:返回认证请求中携带的密码,字符串表示

$.ajax({
    url: "/greet",
    data: {name: 'jenny'},
    type: "POST",
    dataType: "json",
    success: function(data) {
        // data = jQuery.parseJSON(data);  //dataType指明了返回数据为json类型,故不需要再反序列化
        ...
    }
})

$.post()


该方法使用POST方式执行Ajax请求,从服务器加载数据。

形式:$.post(url, data, func, dataType);
可选参数:
1)url:链接地址,字符串表示
2)data:需要发送到服务器的数据,格式为{A: '...', B: '...'}
3)func:请求成功后,服务器回调的函数;function(data, status, xhr),其中data为服务器回传的数据,status为响应状态,xhr为XMLHttpRequest对象,个人感觉关注data参数即可
4)dataType:服务器返回数据的格式
 

$.post(
    "/greet",
    {name: 'Brad'},
    function(data) {
        ...
    },
    "json"
)

$.get()

 

该方法使用GET方式执行Ajax请求,从服务器加载数据。

形式:$.get(url, data, func, dataType);
其各个参数所示意义与$.post()一致,在此不再列出,唯一区别就是请求类型是GET。


$.get(
    "/greet",
    {name: 'Brad'},
    function(data) {
        ...
    },
    "json"
)

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值