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);