PHP AJAX確認表單提交

Question

我有一個小表格，其中包含名字，姓氏和日期。點擊提交表單時，我希望它檢查數據庫是否有重複條目（使用Ajax），如果已有1條以上的條目，則提供確認窗口，以確認另一個提交。確認不應顯示是否沒有任何條目。

出於某種原因，它似乎在沒有來自Ajax PHP頁面的結果的情況下呈現確認。如果我在xmlHttp.send(null)行之後引入了一個警報，它會從PHP獲取文本（如所需），這讓我覺得我誤解了代碼執行的順序。下面是代碼：

的Javascript：

function check_duplicates() { 
     var first = document.getElementById('first_name').value; 
     var last = document.getElementById('last_name').value; 
     var date = document.getElementById('event_date').value; 

     var xmlHttp = GetXmlHttpObject(); 
     if (xmlHttp == null) { 
      alert ("Your browser does not support AJAX!"); 
      return; 
     } 

     var result = "ERROR - Ajax did not load properly"; 
     var url="check_duplicate.php"; 
     url=url+"?first="+first; 
     url=url+"&last="+last; 
     url=url+"&date="+date; 

     xmlHttp.onreadystatechange=function() { 
      if(xmlHttp.readyState==4) { 
       result = xmlHttp.responseText; 
       alert("RESULT="+result); 
       if(result != "clean") { 
        var validate = confirm(result); 
        return validate; 
       } 
      } 
     } 

     xmlHttp.open("GET",url,true); 
     var test = xmlHttp.send(null); 
    } 
    function GetXmlHttpObject() { 
     var xmlHttp = null; 
     try { 
      // Firefox, Opera 8.0+, Safari 
      xmlHttp=new XMLHttpRequest(); 
     } 
     catch (e) { 
       // Internet Explorer 
       try { 
        xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); 
       } 
       catch (e) { 
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
       } 
     } 

     return xmlHttp; 
    } 

PHP：

// DATABASE CONNECTION INFORMATION REMOVED 

$first = $_GET['first']; 
$last = $_GET['last']; 
$date = date('Y-m-d',strtotime($_GET['date'])); 

$sql = "SELECT COUNT(*) AS count FROM Table WHERE First='$first' AND ". 
     "Last='$last' AND Date='$date'"; 
$result = mysql_query($sql); 
$row = mysql_fetch_array($result); 

if($row['count'] > 0) { 
    if($row['count'] == 1) { 
     echo "There is already an entry for ".$first." ".$last." on ". 
      date('M jS',strtotime($date)).".\n". 
      "Are you sure you want to submit this entry?"; 
    } 
    else { // plural version of the same message 
     echo "There are already ".$row['count']." entries for ".$first." ". 
     $last." on ".date('M jS',strtotime($date)).".\n". 
     "Are you sure you want to submit this entry?"; 
    } 
} else { 
    echo "clean"; 
} 

Answer 1

這是一個使用同步AJAX的答案。這樣，您不必重載默認表單處理以使其起作用。但是，確認請求正在運行時，所有javascript都將被阻止，這意味着您的網頁可能會在確認請求持續很長時間時出現尖銳的停頓。

如果應添加記錄，此函數將返回true，否則返回false。

function check_duplicates() { 
    var first = document.getElementById('first_name').value; 
    var last = document.getElementById('last_name').value; 
    var date = document.getElementById('event_date').value; 

    var xmlHttp = GetXmlHttpObject(); 
    if (xmlHttp == null) { 
     alert ("Your browser does not support AJAX!"); 
     return false; 
    } 

    var result = "ERROR - Ajax did not load properly"; 
    var url="check_duplicate.php"; 
    url=url+"?first="+encodeURIComponent(first); 
    url=url+"&last="+encodeURIComponent(last); 
    url=url+"&date="+encodeURIComponent(date); 

    xmlHttp.open("GET",url,false); 
    xmlHttp.send(null); 

    var validated = true; 
    var result = xmlHttp.responseText; 

    if (result != 'clean') 
     validated = confirm("RESULT="+result); 

    return validated; 
} 

Answer 2

這行代碼返回undefined。

var test = xmlHttp.send(null); 

你要明白什麼是該send()調用立即返回和Javascript保持運行。同時，您的AJAX請求正在後臺運行。此外，一旦請求完成，您的onreadystatechange處理程序將被調用，無論是需要10ms還是100s，並且其餘的代碼都不會收到其返回值。

我想你想在確認完成後提交表格。您只需在onreadystatechange處理程序中知道請求何時完成。這裏的問題是，爲了等待AJAX​​請求完成，你必須重寫表單的默認行爲。

您需要在表單提交事件中調用preventDefault()，然後在確認後手動提交數據。

xmlHttp.onreadystatechange=function() { 
     if(xmlHttp.readyState==4) { 
      var confirmed = false; 
      var result = xmlHttp.responseText; 
      if (result == "clean") 
       confirmed = true; 
      else 
       confirmed = confirm("RESULT="+result); 

      if (confirmed) { 
       var url = "addData.php"; 
       url=url+"?first="+encodeURIComponent(first); 
       url=url+"&last="+encodeURIComponent(last); 
       url=url+"&date="+encodeURIComponent(date); 
       window.location = url; 
      } 
     } 
    } 

此外，當你建立你的網址時，你應該使用encodeURIComponent。

url=url+"?first="+encodeURIComponent(first); 
    url=url+"&last="+encodeURIComponent(last); 
    url=url+"&date="+encodeURIComponent(date);