本人从来不发博客,这篇算是破例了,或许以后遇到有需要还会再发。为什么发这篇博文,是因为在csdn的问答栏目刚好遇到一个关于ajax提交表单的问题,看到有些错误的回答,但是很多人分不清楚哪些答案正确,哪些答案错误,所以发这篇博文让大家加深了解。
首先来说说submit表单提交的方式和button 加 js 的方式的区别。
submit方式:
<input type="submit" name="button1" value="提交" onClick="submit_onclick()">
这里首先执行onClick,执行完onClick,转到action。可以自动提交不需要onClick,所以说onclick这里可以不要。而且表单 内容不用手动获取,浏览器会自动提交
button方式:
<input type="button" name="button2" value="提交" onClick="bt_submit_onclick()">
执行完onClick,跳转文件在 js文件里控制,提交需要onClick.如果这儿没有 onClick,是无法提交表单的,而且表单内容需要 手动获取
function submit_onclick(){
/*这里是相关代码
.......
*/
//注意这里如果你用ajax方式提交了表单而且没有加上 return false; 那么就会造成表单的重复提交
});
function bt_submit_onclick(){
/*这里是相关代码
.......
*/
$.ajax({
type:'post',
url:'xxx',
data:xxxData,
dataType : 'json',
success:function(data){
//正确后需要做什么,代码在这里写
},
error:function (xhr, textStatus){
//错误处理
}
});
请看红色标记,type="submit"方式提交,首先执行onClick,就是执行 submit_onclick()函数里面的代码,如果在submit_onclick()里面没有做任何处理的话,浏览器会自动提交一次表单。所以如果采用这种方式提交,而又在js里面写了相关函数的情况,要特别注意重复提交表单的问题。还有一个需要注意的是如果<input type="submit" name="button1" value="提交" onClick="submit_onclick()"> 是写在<form>表单里面的,那么如果你通过submit_onclick()函数里面通过ajax提交表单,然后通过 return false 的方式阻止浏览器自动提交表单,那么请将type="subnmit" 改成 type="button",不然的话,在ajax提交的时候会出现块错误,估计很少人会犯这样的错误,因为采用哪种方式提交应该是很清晰的,而不是这样模糊不清的。
好了,现在来说说ajax的兼容性问题,原生的Ajax确实存在兼容性问题,所以jquery对Ajax进行了封装来兼容大部分的浏览器,所以只要你用的浏览器是现在主流的浏览器大部分都不存在兼容性问题,如果是ie的话,版本不是以前的很老的版本的话,都不存在兼容性问题。那位朋友居然胡扯到兼容性,所以就在这里提一下,如果还有不明白可以留言,或者有错误也欢迎留言指出来。