html form中的button引起的问题

原创 2013年12月02日 15:41:58

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里面,所以就出问题了。

html中form表单向Jsp提交中文乱码问题基本解决办法

一、表单提交的乱码处理   表单提交分为GET和POST两种提交方式。两种方式的乱码解决又不一样,用POST提交只需要在接受的时候加上request.setCharacterEncoding("...

Odoo Form View Hide Edit Button

  • 2016年04月28日 23:03
  • 2KB
  • 下载

总结:FORM中使用onSubmit="return false"防止表单自动提交,以及submit和button提交表单的区别

今天在实现业务的时候,jsp页面总是自动提交。 在页面中有多个input type="text"的文本输入框的情况下没有问题,但是当页面中有只有一个文本框的情况下(),就会出现此问题.  ...

form表单下button默认提交

关于button默认提交的深入理解

FORM中使用onSubmit="return false"防止表单自动提交,以及submit和button提交表单的区别

今天在实现业务的时候,jsp页面总是自动提交。 在页面中有多个input type="text"的文本输入框的情况下没有问题,但是当页面中有只有一个文本框的情况下(),就会出现此问题.   后来...
  • fatOwen
  • fatOwen
  • 2011年08月09日 11:48
  • 1040

Bootstrap的一些笔记——form,button,etc.

所有标签都可以添加class="well"。用来增加默认样式(白色圆角的那个)。 标签不同于网格系统,是已经加入了可见样式的标签。可以结合google-code-prettify代码加亮。 ...
  • friskit
  • friskit
  • 2012年02月11日 14:16
  • 20890

form表单提交中的input,button,submit

原文链接:http://www.cnblogs.com/shytong/p/5087147.html 1.input[type=submit] 我们直接来看例子: ...

<form><textarea><label><fieldset><legend><optgroup><button>标签整理

标签整理

总结:FORM中使用onSubmit="return false"防止表单自动提交,以及submit和button提交表单的区别

最近被form的自动提交烦的不行,网上搜了一些资料,下面这篇文章总结的非常全,基本好多我之前也都试过了(就差总结了^=^)。呵呵,有网友总结的这么全,就直接拿来了:) 在页面中有多个input ty...
  • jyb123
  • jyb123
  • 2012年03月29日 17:40
  • 414

关于form表单button事件教训

在form中我自定义了一个button,然后在button上增加了点击事件。html代码大致如下: ...
  • cwzhsi
  • cwzhsi
  • 2015年12月09日 11:41
  • 2308
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html form中的button引起的问题
举报原因:
原因补充:

(最多只允许输入30个字)