ボタンの Ajax リクエストを行うときに 1 回のクリックで 2 つの送信が発生する問題の解決策

ajax のようなリクエストが 2 回送信される理由は、ajax リクエストの実行後、送信動作がブロックされないためです。 以下に、エディターには 2 種類の ajax のボタンが表示されます。1 回クリックして 2 回送信します。解決策、ajaxに興味のあるお友達はぜひ一緒に見てください

ページ上のボタンのタイプは submit:

ajax リクエストは、JQuery では次のようになります:

$(function () {
$('#submit').click(function () {
var createGenreForm = $('#createGenreForm');
if (createGenreForm.valid()) {
var obj = {
Name: $('#Name').val(),
Description: $('#Description').val()
};
var jsonSerialized = JSON.stringify(obj);
$.ajax({
type: "POST",
url: createGenreForm.attr('action'),
dataType: "json",
contentType: "application/json; charset=utf-8",
data: jsonSerialized,
success: function (result) {
alert(result.Message);
},
error: function (error) {
alert("There was an error posting the data to the server: " + error.responseText);
}
});
}
});
});

2 つの送信が発生した理由は、ajax リクエストの実行後、送信動作がブロックされていないためです。解決策は 2 種類です:

1. submit タイプのボタンを使用する代わりに、button タイプのボタンを使用します。

2. $('#submit').click 関数の最後に return false という行を追加して、送信を防ぎます。

ちょっとした説明: タイトルに英語を埋め込む必要があるのはなぜですか?その理由は、海外のネットユーザーがこの記事に問い合わせられるようにするためです。普段Googleで情報を調べる際に海外ネット民のブログを参考にすることが多く、解決することが多いので、自分が書いた内容も参考にしてもらいたいと思っています。もちろん、記事内のすべてを英語に翻訳することはできません。そのため、すべてのコードを貼り付けて、コード自体が語るように最善を尽くします。

上記は、ボタンを 2 回クリックして Ajax リクエストを送信するためにエディターが紹介した解決策です。皆さんのお役に立てば幸いです。 ！

関連する推奨事項:

非同期リフレッシュを実装するための手書きAjaxのメソッド例

Ajax非同期リクエスト技術の分析例

Ajaxクロスドメインリクエストの原理の詳細な説明

以上がボタンの Ajax リクエストを行うときに 1 回のクリックで 2 つの送信が発生する問題の解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。