解决jquery使用ajax提交button标签时重复提交了。

这几天遇到一个jquery的ajax问题。相关代码是

<form action="xxx" method="post">
<button type="submit" class="tijiao">提交</button>
</form>

js为

$(".tijiao").click(function(){
  $.post(xxx, $('.alert-form').serialize(), function(result){})
})

在chrome下只发送一次请求,但是在firefox下竟然发送了两次,一次是ajax一次是正常的post。

最后到网上查了下资料。原来firefox将button标签视为input,上述代码的效果相当于如下:

<form action="xxx" method="post">
<input type="submit" class="tijiao" value="提交"/>
</form>

运行的效果就是ajax数据之后,浏览器的submit又post了一次从而阻塞了ajax的请求。导致ajax收不到返回的数据。

解决办法:

将button标签干脆改成input type属性改成button,不能用submit属性。

代码如下

<form action="xxx" method="post">
<input type="button" class="tijiao" value="提交"/>
</form>

时间: 2024-10-18 11:08:01

解决jquery使用ajax提交button标签时重复提交了。的相关文章

用Jquery动态append方式加入标签时Css样式丢失的解决方法

一般在Jquery中会用下面的方式来添加新标签: var obj = "<fieldset data-role='controlgroup' data-type='vertical' data-role='fieldcontain'> <input id='menu0" type='checkbox'/><label for='menu0'> 复选框 </label> </fieldset>";  //按个人要求拼接

JSONP解决跨域问题,防止表单重复提交,防止XSS攻击

一.跨域问题:能够正常请求,但是没有办法获取到响应结果 解决方案一:设置请求头,在请求的资源中设置Access-Control-Allow-Origin请求头 //3.设置请求头 response.setHeader("Access-Control-Allow-Origin", "*"); 二.JSONP解决跨域问题 普通的跨域访问问题,浏览器会进行拦截,凡是src属性的都不会拦截 ajax:http://www.a.com:8080/a/AServlet JSON

js表单验证时重复提交的问题

1.错误示例 上图中的提交表单的按钮类型是submit的,这样提交表单的时候就算你onclick事件中返回的是false表单还是会提交的 2.正确示例: 我们将按钮的类型改为button这样就不会发生重复提交表单的现象了.

【ASP.NET】 【防止连续多次点击提交按钮 导致页面重复提交】

最近做项目遇到了这样的情况: 公司网络比平常慢了不少,在点击保存按钮提交页面后需等待挺长的一段时间,忍不住手贱点多了几次,当提交完成后发现数据库语句执行异常. 两种验证方式: 第1种: aspx页面按钮: <asp:Button ID="btnSumbit" runat="server" Text="提交" onclick="btnSumbit_Click" /> Page_Load 事件: btnSumbit.A

jquery mobile 动态加载标签时,无法正常展示样式

原因 在chrome中审查元素,发现其增加了很多没有直接写在页面上的标签和样式.页面标签首先经过jquery.mobile-1.4.5.min.js的处理,添加了许多标签,然后再用css布局 解决方案 1.将jquery.mobile-1.4.5.min.js处理后的样式动态添加,即将chrome中审查元素得到的完整元素及样式复制下来,动态添加 缺点:代码很多,而且加了很多奇怪样式和各种标签 2.refresh 各类标签的刷新 1.Textarea fields $('body').prepen

asp.net防止刷新时重复提交

前段时间遇到了需要禁用刷新的需求,f5按钮就不说了,简单的js就能把它禁用,但是工具条上的刷新按钮却傻傻干不掉. 如果简单的在刷新时重新加载画面,通过window.location.href="url"可以很容易的实现,但是需求是要求在刷新时什么都不做,保留画面的状态,这下子可就复杂化了. asp.net中分辨请求是重新请求还是通过刷新按钮再次请求不是很方便,为了实现这个效果,试过了很多的方式,一下面的两种为例 1. private bool pageRefreshed = false

button按钮防重复提交(点击提交之后提交按钮变灰,操作执行完之后恢复)

jsp中form表单: <form action="" id="form"> <table style="width:80%;height:80%;" border="1" cellspacing="0" cellpadding="0" align="center" valign="middle"> <tr> &

MVC Ajax.BeginForm重复提交解决方法

mvc使用MVC Ajax.BeginForm提交的时候有重复提交结果的时候检查相关js文件引用情况, 其中mvc4注意 1 2 3 4 @Scripts.Render("~/bundles/modernizr") bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(                        "~/Scripts/jquery.unobtrusive*",

基于jquery的Ajax实现 文件上传

---------------------------------------------------------------遇到困难的时候,勇敢一点,找同学朋友帮忙,找导师求助. Ajax Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是"异步Javascript和XML".即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML,现在更多使用json数据). 同步交互:客户端发出一个请