A solution to the problem of two submissions on one click when making an Ajax request for a button

Like ajax, the reason why a request is submitted twice is that after executing the ajax request, the submit behavior is not blocked. The following editor will bring you two kinds of buttons. ajaxThe solution is to click once and submit twice when requesting. Friends who are interested in ajax should take a look.

The type of the button in the page is submit. of:

ajax request, in JQuery is:

$(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);
}
});
}
});
});

The reason why two submissions occurred is that after executing the ajax request, the submit behavior was not blocked, so the solution is Two types:

1. Instead of using a button whose type is submit, use a button whose type is button.

2. In the $('#submit').click function, add a return false; line at the end to prevent submission.

A little explanation: Why should we embed English in the title? The reason is to enable foreign netizens to query this article. When I usually look up information on Google, I often refer to the blogs of foreign netizens, which help me solve many problems, so I also want them to refer to the content I write. Of course, I can't translate everything in the article into English, so I try my best to paste all the code and let the code speak for itself.

The above is the solution that the editor introduces to you to click twice to submit the Ajax request of the button. I hope it will be helpful to everyone! !

Related recommendations:

Example method of handwritten Ajax to achieve asynchronous refresh

Example analysis of Ajax asynchronous request technology

Detailed example of the principle of Ajax cross-domain request

The above is the detailed content of A solution to the problem of two submissions on one click when making an Ajax request for a button. For more information, please follow other related articles on the PHP Chinese website!