blocks|key|1500368|text|很可能是使用button或submit来触发ajax事件。试试这个：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1500369|$('#exportForm').submit(function(e){
++++++++e.preventDefault();
++++++++$.ajax({
++++++++++++type:+"POST",
++++++++++++url:+$(this).attr(+'action'+),
++++++++++++data:+$(this).serialize(),
++++++++++++success:+function(+response+)+{
++++++++++++++++console.log(+response+);
++++++++++++}
++++++++});

++++++++return+false;
++++});|code-block|syntax|javascript|1500370|entityMap^0|6|6|D|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

It's most likely that you're using a <code>button</code> or <code>submit</code> to trigger the ajax event. Try this:

<pre><code>$('#exportForm').submit(function(e){
 e.preventDefault();
 $.ajax({
 type: "POST",
 url: $(this).attr( 'action' ),
 data: $(this).serialize(),
 success: function( response ) {
 console.log( response );
 }
 });

 return false;
 });
</code></pre>

blocks|key|750974|text|除了调用preventDefault之外，还在事件中调用stopImmediatePropagation。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|750975|$('#exportForm').submit(function(e){
++++e.preventDefault();
++++e.stopImmediatePropagation();
++++$.ajax({
++++++++type:+"POST",
++++++++url:+$(this).attr(+'action'+),
++++++++data:+$(this).serialize(),
++++++++success:+function(+response+)+{
++++++++++++console.log(+response+);
++++++++}
++++});

++++return+false;
});|code-block|syntax|javascript|750976|entityMap^0|4|E|S|O|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

As well as calling <code>preventDefault</code>, also call <code>stopImmediatePropagation</code> on the event.
<pre><code>$('#exportForm').submit(function(e){
 e.preventDefault();
 e.stopImmediatePropagation();
 $.ajax({
 type: &quot;POST&quot;,
 url: $(this).attr( 'action' ),
 data: $(this).serialize(),
 success: function( response ) {
 console.log( response );
 }
 });

 return false;
});
</code></pre>

blocks|key|1468790|text|如果您使用某种验证(例如jQuery验证)，表单会提交两次，因为除了您自己编写的$('#exportForm').submit之外，验证插件在成功验证所有字段之后也会提交表单。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1468791|注意:如果您正在使用jQuery验证，请避免使用.submit()。相反，使用submitHandler。|1468792|entityMap|0|LINK|mutability|MUTABLE|url|http://jqueryvalidation.org/validate#submithandler^0|14|N|0|O|9|13|D|13|D|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|H|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

In case you are using some kind of validation (e.g jQuery Validation), the form is submitted twice because aside from <code>$('#exportForm').submit</code> you write yourself, the validation plugin will also submit the form after it successfully validates all field.

NB : If you are using jQuery Validation, avoid using <code>.submit()</code>. Instead, use <a href="http://jqueryvalidation.org/validate#submithandler" rel="noreferrer"><code>submitHandler</code></a>.

blocks|key|1500496|text|您可以简单地使用e.stopImmediatePropagation();：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1500497|例如：|1500498|$('#exportForm').submit(function(e){
++++e.stopImmediatePropagation();|code-block|syntax|javascript|1500499|entityMap^0|8|T|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

You can simply use <code>e.stopImmediatePropagation();</code> :

For example :

<pre><code>$('#exportForm').submit(function(e){
 e.stopImmediatePropagation();
</code></pre>

blocks|key|1500443|text|正如Chris所指出的，e.stopImmediatePropagation()确实有效，它肯定解决了问题，但您不应该使用它。问题仍然存在于您的代码中的某个地方。让我举一个例子，说明如何发送两个帖子请求：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1500444|如果您正在使用AngularJS，并且假设您制作了一个名为"HandleAjaxController“的控制器，您可以将这个ng控制器分配给一个div，然后意外地将这个ng控制器分配给一个内部div。这将导致发送两次post请求。所以：|1500445|++++<div+ng-controller='HandleAjaxController'>
++++++++<div+ng-controller='HandleAjaxController'>
++++++++++++<button+id="home"+type="button"+class="btn+btn-success">Send+data</button>|code-block|syntax|javascript|1500446|有一次，这给我造成了很大的压力，因为在我的ng路线中，我在这里设置了控制器：|1500447|++++$routeProvider
++++.when("/",+{
++++++++templateUrl+:+"src/js/partials/home.html",
++++++++controller+:+"HandleAjaxController"
++++})|1500448|然后在我的home.html：<div+ng-controller='HandleAjaxController'>中再次设置它|offset|length|style|CODE|1500449|无论如何，这就是如何发送两个帖子的一个例子。|1500450|entityMap^0|0|0|0|0|0|F|16|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|11|8|@$O|12|P|13|Q|R]]|9|@]|A|$]]|$1|S|3|T|5|6|7|14|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

As Chris Sercombe pointed out, e.stopImmediatePropagation() does work and it definitely fixes the problem, but you shouldn't have to use it. The problem still exists in your code somewhere. Let me mention an example of how two post requests could be sent:

If you are using AngularJS, and lets say you make a controller called "HandleAjaxController" you could assign this ng-controller to a div, and then accidentally assign this same ng-controller to an inner div. This would cause the post request to be sent twice. So:

<pre><code> &lt;div ng-controller='HandleAjaxController'&gt;
 &lt;div ng-controller='HandleAjaxController'&gt;
 &lt;button id="home" type="button" class="btn btn-success"&gt;Send data&lt;/button&gt;
</code></pre>

This caused a lot of stress for me one time because in my ng-route I had set the controller in here:

<pre><code> $routeProvider
 .when("/", {
 templateUrl : "src/js/partials/home.html",
 controller : "HandleAjaxController"
 })
</code></pre>

and then I set it again in my home.html: <code>&lt;div ng-controller='HandleAjaxController'&gt;</code>

Anyways, that is one example of how two posts could be sent.

blocks|key|1468894|text|您应该检查另一个js代码，也许在某个地方它会触发两次“提交”事件。这种情况发生在我的例子中，我忘记了在onclick处理程序中为一个按钮返回false。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1468895|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

You should check your another js code, maybe somewhere it triggers twice "submit" event.
This happened in my case, i forget "return false" in onclick handler for one button

blocks|key|750254|text|我添加了jquery.unobtrusive-ajax.min.jsref，这是在这里回答的两次https://stackoverflow.com/a/15041642/4412545|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|750255|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/15041642/4412545^0|1C|18|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

i have added jquery.unobtrusive-ajax.min.js ref twice as answered here <a href="https://stackoverflow.com/a/15041642/4412545">https://stackoverflow.com/a/15041642/4412545</a>

blocks|key|1500523|text|对于有几乎相同问题的人，我可以说，您应该控制您的jQuery事件远离函数(){}，所以只有一个来自ajax的请求最好是有这样的事件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1500524|$(document).ready(function+{
+$("#exportForm").click(function{
+++$.ajax({
++++++type:+"POST",
++++++url:+"#",+//your+url
++++++data:+data,+//your+variable
++++++success:+function(){
++++++++//do+something+here
++++++}
+++});
+});
});|code-block|syntax|javascript|1500525|而不是像这样唤起第二个功能的函数：|1500526|$(document).ready(function+{
+exportingForm();

+function+exportingForm(){
+++$("#exportForm").click(function{
+++++$.ajax({
++++++++type:+"POST",
++++++++url:+"#",+//your+url
++++++++data:+data,+//your+variable
++++++++success:+function(){
++++++++++//do+something+here
++++++++}
+++++});
+++});
+}
});|1500527|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

For someone who have almost same problem I can say that you should control your jQuery events away from function(){}, so the best to had only one request from ajax POST is to have events like this: 

<pre><code>$(document).ready(function {
 $("#exportForm").click(function{
 $.ajax({
 type: "POST",
 url: "#", //your url
 data: data, //your variable
 success: function(){
 //do something here
 }
 });
 });
});
</code></pre>

not in function which evokes second function like this:

<pre><code>$(document).ready(function {
 exportingForm();

 function exportingForm(){
 $("#exportForm").click(function{
 $.ajax({
 type: "POST",
 url: "#", //your url
 data: data, //your variable
 success: function(){
 //do something here
 }
 });
 });
 }
});
</code></pre>

blocks|key|1500531|text|只想指出，如果有多个具有相同类的元素，这也可能发生。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1500532|<button+class="downvote">
++<img+src="/img/thumbs-down.png"+class="downvote">
</button>|code-block|syntax|javascript|1500533|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Just want to point out, if you have more than one element with the same class, this can happen as well.

<pre><code>&lt;button class="downvote"&gt;
 &lt;img src="/img/thumbs-down.png" class="downvote"&gt;
&lt;/button&gt;
</code></pre>

blocks|key|750233|text|这个问题可以通过使用div代替php表单上的按钮来解决。由于使用ajax，不需要按钮。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|750234|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

The problem can be resolved by using a div in place of a button on your php form. A button is not needed due to the use of ajax.

I've got a form that I'm capturing via jQuery and sending via AJAX. My problem is that the form submits more than once every time I refresh the page.

I've tried to unbind the submit button but then the form is posted normally after the first submit. Any help would be appreciated

<pre><code>$('#exportForm').submit(function() {
 $.ajax({
 type: "POST",
 url: $(this).attr('action'),
 data: $(this).serialize(),
 success: function(response) {
 $('#exportForm').unbind('submit');
 console.log(response);
 }
 });
 return false;
});
</code></pre>

jQuery AJAX form submits twice

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我有一个通过jQuery捕获并通过AJAX发送的表单。我的问题是，每次刷新页面时，表单都提交一次以上。我试图取消提交按钮，但然后表单通常在第一次提交后发布。如能提供任何帮助，将不胜感激。$('#exportForm').submit(function() {  $.ajax({    type: "POST",    url: $(this).attr('action'),    data: $(

问jQuery AJAX表单提交两次
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery AJAX表单提交两次EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery AJAX表单提交两次
EN