PHP的JQuery POST - 发送重复的数据

Question

我有一个PHP表单，在jQuery的帮助下发送数据。每当我点击“提交”，我看到它发送两次数据，导致双重数据库条目等等。

此外，我仍在努力如何显示try/catch块的“错误”和异常。

注意：此表单在另一个网站上工作，我只更改了字段以及它发送数据的位置，但无法使其工作。

谢谢你的帮助。

---

登记表

<div id="registration" class="representativeForm"> 
 
\t <div class="result"> 
 
\t </div> 
 
\t <div class="formbody"> 
 
\t \t <div class="left"> 
 
\t \t \t <input required="required" type="text" name="name" placeholder="Your name" /> 
 
\t \t \t <input required="required" type="text" name="surname" placeholder="Your surname" /> 
 
\t \t \t <input required="required" type="text" name="birthdate" placeholder="Your birth date" /> 
 
\t \t \t <input required="required" type="text" name="nationality" placeholder="Your nationality" /> 
 
\t \t \t <?php countriesSelection($con, $_LANG, "country"); ?> 
 
\t \t \t <input required="required" type="email" name="email" placeholder="Your Email adress" /> 
 
\t \t \t <input required="required" type="text" name="position" placeholder="Your title or job position" /> 
 
\t \t \t <div class="schoolSelectionfields"> 
 
\t \t \t \t <?php schoolSelection($con, $_LANG, "schools"); ?> 
 
\t \t \t </div> 
 
\t \t \t <input type="checkbox" id="schoolnotlisted" name="schoolnotlisted" value="1">Your school is not listed? Register school here.<br /> 
 
\t \t </div> 
 
\t \t <div class="right"> 
 
\t \t \t <div class="school_register"> 
 
\t \t \t \t <?php schoolRepresentativeRegistration($_LANG, $con); ?> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <input type="hidden" name="form" value="representativeForm"> 
 
\t <input type="submit" value="Register" id="representativeSubmit" /> 
 
</div>

---

jQuery代码

$("#representativeSubmit").click(function() { 

    var proceed = true; 
    //simple validation at client's end 
    //loop through each field and we simply change border color to red for invalid fields 
    $("#registration.representativeForm input[required=true]").each(function(){ 
     $(this).css('border-color',''); 
     if(!$.trim($(this).val())){ //if this field is empty 
      $(this).css('border-color','red'); //change border color to red 
      proceed = false; //set do not proceed flag 
     } 
     //check invalid email 
     var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
     if($(this).attr("type")=="email" && !email_reg.test($.trim($(this).val()))) { 
      $(this).css('border-color','red'); //change border color to red 
      proceed = false; //set do not proceed flag    
     } 
    }); 
    if(proceed) //everything looks good! proceed... 
    { 
     //get input field values data to be sent to server 
     post_data = { 
      'form'  : $('input[name=form]').val(), 
      'name'  : $('input[name=name]').val(), 
      'surname' : $('input[name=surname]').val(), 
      'birthdate' : $('input[name=birthdate]').val(), 
      'nationality' : $('input[name=nationality]').val(), 
      'email' : $('input[name=email]').val(), 
      'position' : $('input[name=position]').val(), 
      'country' : $('select[name=country]').val(), 
     }; 

     if($("#schoolnotlisted").prop('checked') == true) { 
      post_data += { 
       'schoolName' : $('input[name=schoolName]').val(), 
       'schoolAddress' : $('input[name=schoolAddress]').val(), 
       'schoolZipcode' : $('input[name=schoolZipcode]').val(), 
       'schoolCity' : $('input[name=schoolCity]').val(), 
       'schoolCountry' : $('select[name=schoolCountry]').val() 
      }; 
     } 
     else { 
      post_data += { 
       'schools' : $('select[name=schools]').val() 
      }; 
     } 
     //Ajax post data to server 
     $.post('registration.php', post_data, function(response){ 
      if(response.type == 'error'){ //load json data from server and output message  
       output = '<div class="error">'+response.text+'</div>'; 
      }else{ 
       output = '<div class="success">'+response.text+'</div>'; 
       //reset values in all input fields 
       $("#registration.representativeForm input[required=true]").val(''); 
       $("#registration.representativeForm .formbody").slideUp(); //hide form after success 
      } 
      $("#registration .result").hide().html(output).slideDown(); 
     }, 'json'); 
    } 
}); 
//reset previously set border colors and hide all message on .keyup() 
$("#registration.representativeForm input[required=true]").keyup(function() { 
    $(this).css('border-color',''); 
    $(".result").slideUp(); 
}); 

Answer 1

尝试改变事件处理程序窗体本身而不是提交按钮，并在那里放置一个event.preventDefault()声明。由于您没有发布表单代码，我只是简单地将其命名为“表单”。

$("#form").submit(function(event) { 
    event.preventDefault(); 
    // here comes everything from the click handler attached to "#representativeSubmit" 
}); 

原因你加倍发帖是你连接到提交函数功能被执行，事后提交事件给予的形式为好。

Answer 2

它会发送重复数据，因为您绑定了提交按钮的click事件。当你的绑定函数完成后，表单提交 - 触发一个submit事件，但你没有绑定到这个，所以它发送另一个请求。

你没有包括在你的代码的包装form所以我会承担它的存在和上面代码中的某处

更改线路

$("#representativeSubmit").click(function() { 

到

$("#representativeSubmit").closest('form').submit(function() { 

这将选择包装表单，并将您的例程绑定到该表单的提交事件。

此外，您是否可以在浏览器的开发人员工具中确认实际上是否有2个AJAX调用？如果您使用的是Chrome，请按F12并转至网络选项卡并按XHR进行过滤。点击任何内容之前执

Answer 3

修复重复请求Ajax时单击

$('#representativeSubmit').unbind().bind('click', function(event){ 
    event.preventDefault(); 
    //..... 
});