Javascript Ajax数据表单序列化防止双重提交

如果我快速按下触发点击呼叫的按钮，我正在努力使我的表单避免双重提交。我尝试在成功后禁用按钮，但它仍然发送了两次。这是我的密码：

<script>
$(document).ready(function () {

    $("button#rezerva").click(function () {
        var chkArray = [];
        $(".table:checked").each(function () {
            chkArray.push($(this).attr("id"));
        });
        var selected;
        selected = chkArray.join(",");
        $.ajax({
            type: "POST",
            url: "http://rezerv.city/engine/app/add_rezervare.php?mese=" + selected,
            data: $("form#formular_rezervare").serialize(),
            success: function (data) {
                switch (data) {
                    case "nume_error":
                        $(".msg").html("<p>Vă rugăm completați numele</p>").fadeIn("slow");
                        break;
                    case "tel_error":
                        $(".msg").html("<p>Vă rugăm completați telefonul</p>").fadeIn("slow");
                        break;
                    case "email_error":
                        $(".msg").html("<p>Vă rugăm completați un email valid</p>").fadeIn("slow");
                        break;
                    case "tel_numar":
                        $(".msg").html("<p>Numarul de telefon trebuie sa contina 10 cifre</p>").fadeIn("slow");
                        break;
                    case "adaugat":
                        $('#rezerva").attr('disabled', 'disabled')
                        var ora = document.getElementById("timepicker1").value;
                        var zi_aleasa = document.getElementById("zi").value;
                        var tip = document.getElementById("tipp").value;
                        var id_local = document.getElementById("id_local").value;
                        $("#filtru_zi").load("http://rezerv.city/select_tip_rezervare.php?zi=" + zi_aleasa + "&tip=" + tip + "&id=" + id_local);
                        $(".succes").html("<p class=\'text-center\'>Ati rezervat masa <b>" + selected + "</b> in data de <b>" + zi_aleasa + "</b> la ora <b>" + ora + "</b></p><p class=\'text-center\'><button class=\'btn btn-default\' type=\'button\' id=\'inchide\'>Închide</button></p>").fadeIn("slow");
                        break;
                    default:
                        alert("A aparut o eroare. Va rugam incercati mai tarziu.");
                }
            },
        });
    });
});
</script>

$（文档）.ready（函数（）{
$（“按钮#rezerva”）。单击（函数（）{
var chkArray=[]；
$（“.table:选中”）.each（函数（）{
chkArray.push（$（this.attr（“id”））；
});
选择var；
所选=chkArray.join（“，”）；
$.ajax({
类型：“POST”，
url:“http://rezerv.city/engine/app/add_rezervare.php?mese=“+选定，
数据：$（“form#formular_rezervare”）.serialize（），
成功：功能（数据）{
交换机（数据）{
案例“nume_错误”：
$（“.msg”）.html（Vărugăm completați numele
”）.fadeIn（“慢”）；
打破
案例“电话错误”：
$（“.msg”）.html（Vărugăm completați telefonul
”）.fadeIn（“慢”）；
打破
案例“电子邮件错误”：
$（“.msg”）.html（Vărugăm completați un-email-valid
”）.fadeIn（“慢”）；
打破
案例“tel_numar”：
$（“.msg”）.html（“Numarul de telefon trebuie sa contina 10 cifre
”）.fadeIn（“慢”）；
打破
“adaugat”案：
$（'rezerva'）.attr（'disabled'，'disabled'））
var ora=document.getElementById（“timepicker1”）.value；
var zi_aleasa=document.getElementById（“zi”）.value；
var tip=document.getElementById（“tipp”）.value；
var id_local=document.getElementById（“id_local”）.value；
$（“filtru_zi”）。加载（“http://rezerv.city/select_tip_rezervare.php?zi=“+zi_aleasa+”&tip=“+tip+”&id=“+id_local”）；
$（“.succes”）.html（“
Ati rezervat masa”+selected+”在数据中“+zi_aleasa+”la ora“+ora+”
”
nchide
”）.fadeIn（“慢”）；
打破
违约：
警觉（“一个爱的世界。”）；
}
},
});
});
});

我建议将处理程序从onclick更改为onsubmit，并使用e.preventDefault

$("#formid").on('submit', function(e){
    e.preventDefault();
    //the rest of your code
});

---

我会将事件侦听器绑定到表单的提交事件，而不是按钮的单击。我知道您在问题中没有询问它，但是绑定到表单的提交事件将提供更好的用户体验，因为您的用户仍然可以在表单中按enter键提交它

现在，就您的问题而言，问题似乎出在您对Ajax的使用上。即使您的Ajax请求尚未返回，表单仍会提交。您需要做的是：

$(function () {
    $('#myform').submit(function (e) {
          e.preventDefault();

          // continue on with your business logic
    });
});

当然，click事件的工作方式相同，因此如果需要绑定到submit按钮的click事件，还可以执行以下操作：

$(function () {
    $("button#rezerva").click(function (e) {
        e.preventDefault();

        // continue on with business logic
    });
});

---

您必须在未成功单击子bmit时立即禁用

selected = chkArray.join(",");
 $('#rezerva"]').attr('disabled','disabled')//ADD THIS
 $.ajax({
            type: "POST",
            url: "http://rezerv.city/engine/app/add_rezervare.php?mese="+selected,
            data: $("form#formular_rezervare").serialize(),
            success: function(data){ 
            switch(data) {
                    case "nume_error":
                         $(".msg").html("<p>Vă rugăm completați numele</p>").fadeIn("slow");
 $('#rezerva"]').attr('enable','enable')//ADD THIS
                        break;

selected=chkArray.join（“，”）；
$（'#rezerva“]'）。attr（'disabled'，'disabled'）//添加此
$.ajax({
类型：“POST”，
url:“http://rezerv.city/engine/app/add_rezervare.php?mese=“+选定，
数据：$（“form#formular_rezervare”）.serialize（），
成功：函数（数据）{
交换机（数据）{
案例“nume_错误”：
$（“.msg”）.html（Vărugăm completați numele
”）.fadeIn（“慢”）；
$（'#rezerva“]'）。attr（'enable'，'enable'）//添加此
打破

您是否尝试在单击事件开始后立即禁用按钮？如果呼叫失败，请启用按钮。这是正确的答案，我打赌有一种更优雅的方法来解决此问题，但目前此方法有效thnx:）我改为on submit，由于某些原因，它没有提交任何内容，只是刷新了我的页面，在我添加了$（“form#formid”）而不是$（“formid”）之后，我才设法使on submit工作，但e.PrevendFault只是阻止刷新页面而不是我的多次提交#formid应设置为包含我使用的按钮的表单id e.preventDefault，但我仍然可以双击并发送表单两次。基本上，在成功响应中没有错误后，我希望我的按钮不会再次发送表单，即使按钮为presSED这是正确的答案，我打赌有一种更优雅的方法来解决这个问题，但现在它仍然有效thnx:）。我对代码的唯一更改是

$（'#rezerva'）。attr（'enable'，'enable'）

到

$（'#rezerva'）。removeAttr（'disabled'，'disabled'）