一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

jQuery序列化Ajax跨域序列化请求$.ajax

时间:2014-07-12 编辑:简简单单 来源:一聚教程网

用的比较多的jquery+ajax方法是$.post,它也是对$.ajax的二次封装,那么接下里看看$.ajxa的使用:

 代码如下 复制代码
$('#ajax').click(function(){
$.ajax({
type:'post',
url:'test.php',
dateType:'html',//支持htmlxmljsonjsonp
data:{domain:'www.111com.net',keyword:'php博客'},
success:function(response,status,xhr){
console.log('success:'+response);
},
error:function(response,status,xhr){
console.log('error:'+response)
}
});
});

其中jsonp,跨域的操作请查看文章:php+jquery+jsonp实现ajax跨域问题

在表单提交的时候,可能数据比较多那样的话data:{}里面的参数会非常的多,而且容易出错,那么就用到了form的序列化serialize()

 代码如下 复制代码

$('.btn').click(function(){
$.ajax({
type:'post',
url:'test.php',
dateType:'json',//支持htmlxmljsonjsonp
data:$('form').serialize(),//success:{"user":"tuisiyuan","email":"1054770532@qq.com"}
//data:$('form').serializeArray(),//success:{"user":"tuisiyuan","email":"1054770532@qq.com"}
success:function(response,status,xhr){
console.log('success:'+response);
},
error:function(response,status,xhr){
console.log('error:'+response)
}
});
});

php中serialize截图:

ajax-serialize

php中serializeArray截图:

ajax-serializeArray

由上看出在php端对数据的处理,serialize和serializeArray基本没啥区别。

还有一个不太常用但是比较有用的方法,那就是ajax数据初始化的方法:$.ajaxSetup对重复数据的初始化

$.ajaxSetup({//初始化共同的数据,使代码不出现过多的重复现象

 代码如下 复制代码
type:'post',
url:'test.php'
});

补充:jsonp实现ajax跨域请求

首先我在本地一个域名下加载以下代码:

 代码如下 复制代码

javascript"src="http://www.lshop.com/js/test.js">
然后我在www.lshop.com中的js的test.js中贴上jsonp的代码:

$.ajax({
type:"get",
async:false,
url:'http://www.111com.net/ index.php',
dataType:"jsonp",
//jsonp:"callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"flightHandler",//php中返回值的时候需要包裹返回数据的函数
success:function(json){
alert('我的关键字是:'+json.stitle);
},
error:function(){
alert('fail');
}
});

php端的代码:

 代码如下 复制代码

$a=json_encode(array('title'=>'IT博客','stitle'=>'javascript博客'));
echo"flightHandler($a)";
exit;

得到的结果是:弹出—我的关键字是:javascript博客。

热门栏目