ajax中get和post的提交、却别、错误处理以及注意事项
2016-08-16 17:14
246 查看
版权声明：本文为博主原创文章，未经博主允许不得转载。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
$.get和$.post的不同
1、get通过url提交的，post是通过http消息实体提交的
2、get提交大小限制为2kb，post不限制
3、get提交会被缓存下来，有安全隐患，post没有
4、get通过$_get[]，而post通过$_POSt[]获取
$.get 和 $.post的几种传参方式
1、在url后面直接问号传参： test.php?age=20
2、以字符串键值对的方式传参： 'age=20'
3、以对象键值对的方式传参： {age:20}
$.get 以上三种方式都支持，但是$.post和$.ajax只支持后2种写法
具体demo:
1、$.get('test.php?age=20',function(result){
alert(result)
})
2、$.get('test.php','age=20',function(result){
alert(result)
})
3、$.get('test.php',{age:20},function(result){
alert(result)
})
，php文件异步请求默认返回的是text或html的type类型，如果返回的是非json类型强制用type转成json类型可能会报错
三、getScript 一般就是引入一个js文件
$.getScript('demo.js') 即可
四：getScript 请求一个json文件，不必要指定返回的数据类型，而且如果制定了非json的type类型如type：html ，由于安全性高一点也不会返回html格式的数据
五、在用ajax 提交表单的时候可以用表单序列化获取表单的传参内容，而且传参的形式是字符串键值对,并且还会对url进行编码
$('form').serialize();
如：$.ajax({
type:'POST',
url:'text.php',
data: $('form').serialize(),
success:function(response,status,xhr){
dosomething...
}
})
五-1；在一下html中可以用decodeURLComponent对序列化的数据进行解码
<form>
<input type="checkbox" name="sex" value="男" id="">
<input type="checkbox" name="sex" value="女" id="">
</form>
<div id="box"></div>
<script>
$('form input[name=sex]').click(function(){
$('#box').html(decodeURLComponent($(this).serialize()))
})
</script>
5-2,以上的例子可以用serializeArray()可将数据格式化为json格式
六；ajaxSetup 是对ajax进行初始化，应用场景当多个ajax重复用到某些数据的时候可以分装起来如：
$.ajaxSetup({
type:'POST',
url:'text.php',
data:'{}'
});
$('form :submit').click(function(){
$.ajax({
success:function(response,status,xhr){
}
})
});
7.$.param()方法可对复杂的json进行字符串键值对解析r
进阶：
8、$.ajaxstart()和$.ajaxStop()放置加载时间过长处理
在jq1.8版本后必须绑定在document上如：
$(document).ajaxStart(function(){
$('.loading').show()
}).ajaxStop(function(){
$('.loading').hide()
});
8-1 如果加载超时，可以用timeout设置超时限制
===============
$.ajax进阶
1、加载请求
$.ajaxStart() 、$.ajaxStop 可以在对用户等待时间加载loading图片
2、错误处理
$.ajax的错误处理 可以在自己当前添加error方法,参数是(xhr,status,statusText) 如：
2-1： $.ajax的error处理
$.ajax({
url:'www.seogjgsdggd.com/test.php',
type:'POST',
data:'age=20',
error:function(xhr,status,statusText){
alert(xhr.status)
}
});
2-1：$.post的error错误处理，添加连缀的局部方法error,参数是(xhr,errorText,errorType)如：
$.post('test.php','age=20',function(response,status,xhr){
alert(response+"//"+xhr.status)
}).error(function(xhr,errorText,errorType){
alert('错误')
});
也可以用全局的ajaxError方法如(1.8版本建议吧事件绑定在document上)，但是参数有所不同(event,xhr,settings,errorType) 如：
$(document).ajaxError(function(event,xhr,settings,errorType){
event,xhr,settings都是对象，event一般就用(type,target)属性，settings一般就用(url,type);
});
3/ 请求全局事件有 $.ajaxstart(),$.ajaxstop()、$.ajaxError(),
$.ajaxSuccess(),$.ajaxComplete,$.ajaxSend()
前三个是请求时出发的全局事件，
$.ajaxSuccess() 对应一个局部方法 .success();
$.ajaxComplete()对应一个局部方法 .complete();
$.ajaxSend()没有对应的局部方法，只有属性beforeSend
例子：
$(document).ajaxSend(function(){
alert(发送请求之前);
}).ajaxComplete(function(){
alert(请求成功和失败之后都会出现，是出现在成功或者失败的后面);
}).ajaxSuccess(function(){
alert(请求成功后);
}).ajaxError(function(){
alert(请求失败后);
})
$.post('test.php',$('form').serialize()).success(function(){
alert(请求成功后);
}).complete(function({
alert(请求完成后);
}).error(function(){
alert(请求失败后);
})
$.ajax({
url:'test.php',
type:'POST',
data:$('form').serialize(),
success:function(response,status,xhr){
alert(请求成功后);
},
complete:function(){
alert(请求完成后);
},
error:function(xhr,errorText,errorType){
alert(请求错误后);
},
beforSend:function(){
alert(请求之前);
}
})
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
$.get和$.post的不同
1、get通过url提交的，post是通过http消息实体提交的
2、get提交大小限制为2kb，post不限制
3、get提交会被缓存下来，有安全隐患，post没有
4、get通过$_get[]，而post通过$_POSt[]获取
$.get 和 $.post的几种传参方式
1、在url后面直接问号传参： test.php?age=20
2、以字符串键值对的方式传参： 'age=20'
3、以对象键值对的方式传参： {age:20}
$.get 以上三种方式都支持，但是$.post和$.ajax只支持后2种写法
具体demo:
1、$.get('test.php?age=20',function(result){
alert(result)
})
2、$.get('test.php','age=20',function(result){
alert(result)
})
3、$.get('test.php',{age:20},function(result){
alert(result)
})
，php文件异步请求默认返回的是text或html的type类型，如果返回的是非json类型强制用type转成json类型可能会报错
三、getScript 一般就是引入一个js文件
$.getScript('demo.js') 即可
四：getScript 请求一个json文件，不必要指定返回的数据类型，而且如果制定了非json的type类型如type：html ，由于安全性高一点也不会返回html格式的数据
五、在用ajax 提交表单的时候可以用表单序列化获取表单的传参内容，而且传参的形式是字符串键值对,并且还会对url进行编码
$('form').serialize();
如：$.ajax({
type:'POST',
url:'text.php',
data: $('form').serialize(),
success:function(response,status,xhr){
dosomething...
}
})
五-1；在一下html中可以用decodeURLComponent对序列化的数据进行解码
<form>
<input type="checkbox" name="sex" value="男" id="">
<input type="checkbox" name="sex" value="女" id="">
</form>
<div id="box"></div>
<script>
$('form input[name=sex]').click(function(){
$('#box').html(decodeURLComponent($(this).serialize()))
})
</script>
5-2,以上的例子可以用serializeArray()可将数据格式化为json格式
六；ajaxSetup 是对ajax进行初始化，应用场景当多个ajax重复用到某些数据的时候可以分装起来如：
$.ajaxSetup({
type:'POST',
url:'text.php',
data:'{}'
});
$('form :submit').click(function(){
$.ajax({
success:function(response,status,xhr){
}
})
});
7.$.param()方法可对复杂的json进行字符串键值对解析r
进阶：
8、$.ajaxstart()和$.ajaxStop()放置加载时间过长处理
在jq1.8版本后必须绑定在document上如：
$(document).ajaxStart(function(){
$('.loading').show()
}).ajaxStop(function(){
$('.loading').hide()
});
8-1 如果加载超时，可以用timeout设置超时限制
===============
$.ajax进阶
1、加载请求
$.ajaxStart() 、$.ajaxStop 可以在对用户等待时间加载loading图片
2、错误处理
$.ajax的错误处理 可以在自己当前添加error方法,参数是(xhr,status,statusText) 如：
2-1： $.ajax的error处理
$.ajax({
url:'www.seogjgsdggd.com/test.php',
type:'POST',
data:'age=20',
error:function(xhr,status,statusText){
alert(xhr.status)
}
});
2-1：$.post的error错误处理，添加连缀的局部方法error,参数是(xhr,errorText,errorType)如：
$.post('test.php','age=20',function(response,status,xhr){
alert(response+"//"+xhr.status)
}).error(function(xhr,errorText,errorType){
alert('错误')
});
也可以用全局的ajaxError方法如(1.8版本建议吧事件绑定在document上)，但是参数有所不同(event,xhr,settings,errorType) 如：
$(document).ajaxError(function(event,xhr,settings,errorType){
event,xhr,settings都是对象，event一般就用(type,target)属性，settings一般就用(url,type);
});
3/ 请求全局事件有 $.ajaxstart(),$.ajaxstop()、$.ajaxError(),
$.ajaxSuccess(),$.ajaxComplete,$.ajaxSend()
前三个是请求时出发的全局事件，
$.ajaxSuccess() 对应一个局部方法 .success();
$.ajaxComplete()对应一个局部方法 .complete();
$.ajaxSend()没有对应的局部方法，只有属性beforeSend
例子：
$(document).ajaxSend(function(){
alert(发送请求之前);
}).ajaxComplete(function(){
alert(请求成功和失败之后都会出现，是出现在成功或者失败的后面);
}).ajaxSuccess(function(){
alert(请求成功后);
}).ajaxError(function(){
alert(请求失败后);
})
$.post('test.php',$('form').serialize()).success(function(){
alert(请求成功后);
}).complete(function({
alert(请求完成后);
}).error(function(){
alert(请求失败后);
})
$.ajax({
url:'test.php',
type:'POST',
data:$('form').serialize(),
success:function(response,status,xhr){
alert(请求成功后);
},
complete:function(){
alert(请求完成后);
},
error:function(xhr,errorText,errorType){
alert(请求错误后);
},
beforSend:function(){
alert(请求之前);
}
})
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ajax中get和post的提交、却别、错误处理以及注意事项
- Ajax post提交方式注意事项
- Oracle 11.2 单实例连接ASM时需要注意的事项以及问题处理
- 玩转开发板--常见的网络下载错误归纳以及注意事项
- ext form的组件用法，以及提交返回数据的注意事项
- StringBuffer[]以及ArrayList[]的处理的注意事项
- 配置config.bib的注意事项以及错误分析
- 表单向后台提交数据，get和post的两种方式的根本区别以及如何处理乱码？
- PHP 表单提交相关注意事项及错误攻略
- 解决YII提交POST表单出现400错误，以及ajax post请求时出现400问题
- Qt中如何禁掉所有UI操作以及注意事项（处理各个widget的eventFilter这一层，但是感觉不好，为什么不使用QApplication呢）
- 运维注意事项以及常见错误解决办法
- 提交MTBF eservice以及log注意事项
- 配置config.bib的注意事项以及错误分析
- Vue------第五天（Vue的Ajax请求，使用Axios,目前熟悉了一下，主要包括GET请求、POST请求、并发请求、请求参数的配置、服务器响应的结构以及对服务器响应错误的简单处理）
- 7月22日总结的自己在java中犯的错误以及注意事项
- 编程时常犯的几个错误、应注意的事项以及技巧
- Activity抛出异常has leaked window com.android.internal.policy.impl.PhoneWindow处理办法以及注意事项
- 一个SoapExcept异常的处理以及.NET平台下WebService应用的一点注意事项
- 配置config.bib的注意事项以及错误分析