버튼에 대한 Ajax 요청을 할 때 한 번의 클릭으로 두 개의 제출이 발생하는 문제에 대한 솔루션

ajax와 같은 요청이 두 번 제출되는 이유는 ajax 요청을 실행한 후 제출 동작이 차단되지 않기 때문입니다. 아래에서 편집기는 ajax에 대해 두 종류의 버튼을 표시합니다. 요청사항입니다. 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);
}
});
}
});
});

두 개의 제출이 발생한 이유는 ajax 요청이 실행된 후 제출 동작이 차단되지 않기 때문입니다. 해결책은 두 가지 유형입니다:

1. 제출 유형의 버튼을 사용하는 대신 유형 버튼을 사용하십시오.

2. $('#submit').click 함수의 끝에 return false를 추가하여 제출을 방지합니다.

약간 설명: 왜 제목에 영어를 넣어야 할까요? 그 이유는 해외 네티즌들이 이 글에 질의할 수 있도록 하기 위함이다. 저는 평소 구글에서 정보를 검색할 때 해외 네티즌들의 블로그를 자주 참고해 많은 문제를 해결하는데 도움을 주고 있기 때문에, 제가 쓴 내용도 그들도 참고할 수 있었으면 좋겠습니다. 물론 기사의 모든 내용을 영어로 번역할 수는 없으므로 모든 코드를 붙여넣고 코드 자체가 말하도록 최선을 다합니다.

위 내용은 Ajax 요청 버튼을 두 번 클릭하여 제출하라고 에디터가 소개한 솔루션입니다. 모두에게 도움이 되길 바랍니다! !

관련 권장 사항:

비동기 새로 고침을 구현하기 위해 손으로 쓴 Ajax 방법의 예

Ajax 비동기 요청 기술 분석 예

Ajax 도메인 간 요청 원리에 대한 인스턴스 자세한 설명

위 내용은 버튼에 대한 Ajax 요청을 할 때 한 번의 클릭으로 두 개의 제출이 발생하는 문제에 대한 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!