使用ajax遇到的错误

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 onclick="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表单