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