关闭

html form中的button引起的问题

标签: ajax form button
748人阅读 评论(0) 收藏 举报
分类:

Form中包含一个button如

<form>

<button class="btn micro-btn">提交成功!</button>

</form>

然后在点击button的时候调用jquery.ajax方法。这本来是一个很简单的问题,显然就是ajax调用正常工作。但是问题在于ajax调用总是失败。在ajax的回调中注册了fail方法,如下:

fail(function(jqxhr, status){
          console.dir(jqxhr);
          console.log(status);
 });


总是能进入fail方法,理由无从直到。并且是fail之后,总是会刷新当前页面。这可百思不得其解。在Chrome Developer Tool的Network当中也发现request是不全的,甚至连request method都没有。response则没有显示。


搜索半天找到这么一篇文章:http://stackoverflow.com/questions/13892529/ajax-request-fails-cant-see-why. 这里提到fail代码为:

$.ajax({
    /* ajax options omitted */
    error: function (xmlHttpRequest, textStatus, errorThrown) {
         if(xmlHttpRequest.readyState == 0 || xmlHttpRequest.status == 0) 
              return;  // it's not really an error
         else
              // Do normal error handling
});
Error with status or readyState == 0 can occur when you cancel ajax request before it completes, or when you navigate to another page or when you refresh page.

由此可见,还是对于底层的ajax原理了解不清楚。调试一看,果然如他所说。所以是发生了什么事情取消了ajax请求。前面提到页面会刷新,这个刷新实际上取消了ajax请求。为什么会刷新呢,搜索了“form button”之后找到了一些些线索,button是有type属性的,参考这里,有三个值,button,reset,submit,而且各个浏览器可能默认值不一样。Chrom似乎默认用的是submit。而这个button又是在form里面的,所以默认点击就会submit form了。


这样解释就完全行得通了。所以最简单的方法是将button的type属性设置为button。第二种方法就是犹如这里所说的http://stackoverflow.com/questions/8121958/jquery-ajax-post-inside-a-form-prevent-form-submission-on-ajax-call,增加js方法prevernt form submit,或者将button移到form之外。


之前这个button可以正常工作,那是因为button被无意识地写在form外面。这次无意识的移动到form里面,所以就出问题了。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:222692次
    • 积分:3369
    • 等级:
    • 排名:第10349名
    • 原创:110篇
    • 转载:32篇
    • 译文:0篇
    • 评论:52条
    文章分类
    最新评论