0

名、姓、日付を含む小さなフォームがあります。クリックしてフォームを送信すると、(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";
}
4

2 に答える 2

1

これは、同期 AJAX を使用した回答です。このように、デフォルトのフォーム処理を機能させるためにオーバーロードする必要はありません。ただし、確認リクエストの実行中はすべての JavaScript がブロックされます。つまり、確認リクエストがどれだけ長く続いても、Web ページが金切り声で停止したように見える場合があります。

この関数は、レコードを追加する必要がある場合は 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;
}
于 2012-10-07T20:34:23.027 に答える
0

このコード行は を返しundefinedます。

 var test = xmlHttp.send(null);

理解する必要があるのは、send()呼び出しがすぐに戻り、Javascript が実行され続けることです。その間、AJAX リクエストはバックグラウンドで実行されています。また、onreadystatechange10 ミリ秒か 100 秒かかろうと、リクエストが完了するとハンドラーが呼び出され、その戻り値はコードの残りの部分で受信されません。

確認が終わった後にフォームを送信したかったのだと思います。onreadystatechangeハンドラー内からリクエストがいつ終了したかだけがわかります。ここでの問題は、AJAX リクエストが完了するのを待つために、フォームのデフォルトの動作をオーバーライドする必要があることです。

preventDefault()form-submit イベントを呼び出し、確認後に手動でデータを送信する必要があります。

    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);
于 2012-10-07T20:09:53.563 に答える