Why are Ajax requests submitted multiple times with one click?

This time I will bring you why Ajax requests are submitted multiple times with one click. What are the precautions for Ajax requests that are submitted multiple times with one click? Here are practical cases, let’s take a look.

The type of the button in the page is submit:

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 behavior of submit was not blocked. , so there are two solutions:

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

2. In the $('#submit').click function, add the last line return false; 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 be able to refer to the content I wrote. 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.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to submit the form and implement file upload with ajax

How to process the json data uploaded by ajax background success

The above is the detailed content of Why are Ajax requests submitted multiple times with one click?. For more information, please follow other related articles on the PHP Chinese website!