PHP AJAX 양식 확인 제출

Question

성함, 성, 날짜가있는 작은 양식이 있습니다. 클릭하여 양식을 제출할 때 중복 된 항목 (Ajax 포함)을 데이터베이스에서 확인하고 이미 1 개 이상의 항목이있는 경우 다른 제출을 확인하는 확인 창을 표시하십시오. 입력 사항이없는 경우 확인이 표시되지 않아야합니다.

Ajax PHP 페이지의 결과없이 어떤 이유로 인해 확인을 표시하는 것 같습니다. xmlHttp.send(null) 줄 뒤에 경고 메시지를 보내면 PHP에서 텍스트를 가져 와서 (원하는 경우) 코드가 실행되는 순서를 잘못 이해했다고 생각하게 만듭니다. 여기에 코드입니다 :

자바 스크립트 :

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를 사용한 답변입니다. 이렇게하면 기본 양식 처리에 과부하가 걸릴 필요가 없습니다. 그러나 확인 요청이 실행되는 동안 모든 자바 스크립트가 차단됩니다 (). 즉, 확인 요청이 지속되는 동안 웹 페이지가 갑자기 멈추는 것처럼 보일 수 있습니다.

이 함수는 레코드를 추가해야하는 경우 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() 호출 즉시 반환하고 자바 스크립트가 실행 유지한다는 것이다. 한편, AJAX 요청은 백그라운드에서 실행 중입니다. 또한 onreadystatechange 처리기는 요청이 완료되면 10 밀리 초 또는 100 초가 걸리더라도 호출되며 반환 값은 나머지 코드에서 수신되지 않습니다.

확인이 완료된 후 양식을 제출하고 싶다고 생각합니다. 요청이 완료되면 onreadystatechange 처리기 내부에서만 알 수 있습니다. 여기서 문제는 AJAX 요청이 끝날 때까지 대기하려면 양식의 기본 동작을 재정의해야한다는 것입니다.

양식 제출 이벤트에서 으로 전화를 걸어 확인 후 수동으로 데이터를 제출해야합니다.

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

또한 URL을 작성할 때 encodeURIComponent를 사용해야합니다.

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