0

ユーザーが名前を送信するために現在のページを離れる必要がないように、フォームでAJAXを使用しようとしています。ユーザーが自分の名前を入力したときに機能する機能があります。入力中に自動的に変更されます。私が苦労しているのは、名前を送信するためのonClickです。PHP ファイルからの応答がありません。理由がわかりません。これが私のコードです：

フォーム ページ: (submit 関数は、GET 要求を介してグローバル変数を介して名前を送信します)

<script type="text/javascript">

//Decalre the variables of name as Global variable
var name;

    //For IE 5 + 6
function httpReq(){
    if (window.XMLHttpRequest) { 
        // code for IE7+, Firefox, Chrome, Opera, Safari
        return xmlhttp=new XMLHttpRequest();
    } else { 
        // code for IE6, IE5
        return xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
}

function nameTest(str) {
    if (str.length==0) { 
        document.getElementById("nameTest").innerHTML="Please enter your name.";
        return;
    }
    httpReq();
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("nameTest").innerHTML=xmlhttp.responseText;
        }
    }   
    xmlhttp.open("GET","nameTest.php?q="+str,true);
    xmlhttp.send();
    return name = str;
}


// function to submit the users details to the database
function submit(str) {
    httpReq();
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("submitted").innerHTML=xmlhttp.responseText;
        }
    }   
    xmlhttp.open("GET","mailing-list.php?name="+name, true);
    xmlhttp.send();
}   
</script>

    Name: <input type="text" onkeyup="nameTest(this.value)">
    <span id="nameTest">Please enter your name.</span>
            <input style="width: 100px; height: 40px;" type="button" onclick="submit" value="Join!">
        <span id="submitted"></span>

応答を返さないPHPページ(応答が返るまで単純な内容をエコーするだけです):

<?php

$name = $_GET["name"];

echo "Hello There " + $name;

?>

返信がない理由が分からないようです。どんな助けでも大歓迎です！

4

3 に答える 3

1 
var name;

    //For IE 5 + 6
function httpReq(){
    if (window.XMLHttpRequest) { 
        // code for IE7+, Firefox, Chrome, Opera, Safari
        return new XMLHttpRequest();
    } else { 
        // code for IE6, IE5
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}

function nameTest(str) {
    if (str.length==0) { 
        document.getElementById("nameTest").innerHTML="Please enter your name.";
        return;
    }
    var xmlhttp = httpReq();
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("nameTest").innerHTML=xmlhttp.responseText;
        }
    }   
    xmlhttp.open("GET","nameTest.php?name="+str,true);
    xmlhttp.send();
    window.name = str;
}


// function to submit the users details to the database
function submit() {
    var xmlhttp = httpReq();
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("submitted").innerHTML=xmlhttp.responseText;
        }
    }   
    xmlhttp.open("GET","mailing-list.php?name="+window.name, true);
    xmlhttp.send();
}

xmlhttp に値が割り当てられていません。おそらく、コンソールに値が未定義であると表示されます。確認する必要があります。申し訳ありませんが、コード内に多くのエラーがあります。編集しました。今すぐお試しください。submit() はパラメーターを取得しません。以前に関数 nameTest(str) によって設定されたグローバル変数 name(window.name) から名前を取得するだけです。

最後に、クライアント側とサーバー側の互換性を確認する必要があります。クエリ文字列で "?name=" の代わりに "?q=" を使用しました。これらのことに注意してください。

于 2013-05-13T13:30:26.680 に答える
0

関数 submit(str) の値「name」は不明であるため、空です。それをに変えて

xmlhttp.open("GET","mailing-list.php?name="+str, true);

次のように関数を呼び出します。

submit("NameToShow");

ところで: jQuery を使用すると、これがかなり簡単になります。

于 2013-05-13T13:31:34.930 に答える