1.出现问题主要原因是button标签的type属性,button的type属性值有三个分别为button、submit、reset。当我们在利用button标签写一个按钮且没有指定其type属性时,IE7以下版本会默认指定为button,其他会被默认指定为submit。当按钮的type属性被指定为submit的时候,点击它会提交表单。
解决办法:
当需在form标签中放置一个button的时候,如果这个按钮不是做提交表单的,切记一定要设置其type为button。
记一次惨痛的经历:
<form class="form-horizontal" id="updata" method="get" enctype="multipart/form-data" accept-charset="utf-8" action="#">
........ <button οnclick="moreTags()">111</button> </form>
..
function moreTags(){
alert("aaa");
$.ajax({
url:"/dataUp/doTest.action",
type:"post",
data:{'id':'adas'},
success:function () {
alert("222");
},
error:function (err) {
alert("err");
alert(err);
}
});
alert("end");
}
<script type="text/javascript">
var uploader = easyUploader({
id: "uploader",
accept: '.*',
action: '',
dataFormat: 'formData',
maxCount: 10,
maxSize: 30,
multiple: true,
name:'fileName',
data: null,
beforeUpload: function(file, data, args) {
/* dataFormat为formData时配置发送数据的方式 */
data.append('file',file);
},
onChange: function(fileList) {
/* input选中时触发 */
},
............
}
运行后出现问题,首先报错:
百思不得其解,为啥会出现这个错误,对比前后端发现没有问题,路径数据格式都完全匹配,甚至把请求方式改成get也还是报相同的错。
最后发现是因为button没有定义类型,其默认的类型为submit,导致form表单提交了。
改过来之后发现ajax还是无法正常执行,即不走error里面的函数,也不走success里面的函数,后面的代码也不执行。看浏览器的控制台才知道是data.append('file',file)处出现了错误,导致了ajax不执行。
2.ajax返回504,但是我设置了timeout:0;这意味着会无限等待,ajax还返回504,说明不是后端处理复杂问题超时,而是因为后端出现了某些问题,例如数据插入数据库出错,或者其他的循环里的bug,但不是编译时能检查出的。
总结:在ajax出现错误的时候,要同时排查前后端两方面是否存在问题,首先,看路径是否匹配,是否缺少‘/’,其中url:'/../...'表示的是localhost:8080/.../...,其次看请求方式是否匹配,再看数据类型是否匹配。
加入Ajax不执行时,大多数时因为其他地方存在错误。可以打开浏览器控制台进行查看,还有就是其他的一些页面上的bug,例如这里的button按钮提交了form表单