0

私はAJAXを始めたばかりです。テキスト入力ボックスにテキストを入力し、フォームの送信ボタンをクリックして、そのテキストをページに表示するテストを作成しようとしています。すぐに発生するエラーは 404 エラー ( www.mysite.com/ajaxFunction() ) ですが、他にもまだ発見されていないエラーがあると確信しています。AJAXを使い始めるために、これを修正するのを手伝ってくれる人はいますか? 私は車輪を回転させて始めようとしています。また、これは私の最終的な目標が必要とするものであるため、私は php スクリプトを呼び出していることを認識してください。これが、JavaScript 自体を使用していない理由です。ありがとう！

html は次のとおりです。

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>

<body>

    <script language="javascript" type="text/javascript">
    <!-- 
    //Browser Support Code
        window.onload = function ajaxFunction() {
            document.myform.action = getFeedback();
        }

        function getFeedback() {
            var xmlhttp;
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            } else {  
                // code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function() { 
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                    document.getElementById("feedback").innerHTML=xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","scripts/handle_feedback.php",true);
            xmlhttp.send();
        }
    //-->
    </script>

    <div id="leftsidebox"></div>

    <div id="textboxdiv">
        <form name="myform">
            Text Here: <input type="text" name="textbox" id="name" />
            <button type="submit">Submit</button>
        </form>
    </div>

    <div id="feedback">
    </div>

</body>

</html>

handle_feedback.php

<?php
    $mytext = $_REQUEST['textbox'];
    return $mytext;
?>

編集:これが私の最新のhtmlコードです。私はphpに変更を加えました（「return」を「echo」に切り替えます）

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
    window.onload = function ajaxFunction() {
        document.myform.onsubmit = getFeedback;
    }

    function getFeedback() {
        var xmlhttp;
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        } else {  
            // code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function() { 
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                document.getElementById("feedback").innerHTML=xmlhttp.responseText;
            }
        }
        var textvalue = document.getElementById("name").value;
        xmlhttp.open("GET","scripts/handle_feedback.php?textbox="+textbox,true);
        xmlhttp.send();
    }
//-->
</script>

<div id="textboxdiv">
    <form name="myform">
        Text Here: <input type="text" name="textbox" id="name" />
        <button type="submit">Submit</button>
    </form>
</div>

<div id="feedback">
</div>

スクリプト/handle_feedback.php

<?php
    $mytext = $_REQUEST['textbox'];
    echo $mytext;
?>
4

3 に答える 3

2

これはあなたが期待していることをしません：

document.myform.action = getFeedback();

getFeedbackおそらく、フォームが送信されたときに呼び出されることを期待しています。それは実際に起こることではありません。ブラウザがそのコードを実行しようとすると、次のように認識されますaction。しかし、待ってください、右側に関数呼び出しがあります! 設定する戻り値を見つけるために、その関数呼び出しを評価する必要がありますaction!」したがって、ブラウザは忠実getFeedbackにすぐに呼び出します。getFeedbackは何も返さないので、 に設定actionしundefinedます。少年、それは役に立ちました。

フォームが送信されたときに JavaScript 関数が呼び出されるようにする場合、設定actionは適切な方法ではありません。では、正しい方法は何ですか？イベントリスナー。イベントリスナーをアタッチする最も一般的な方法は をaddEventListener使用することですが、ユースケースはかなり単純なので、より単純で無視されがちな方法を使用します: 設定onsubmit:

document.myform.onsubmit = getFeedback;

の後に括弧がないことに注意してくださいgetFeedback。これは意図的なものです。戻り値ではなく、関数自体に設定onsubmitしたいのです。getFeedback

textboxまた、定義せずに使用しています。確かに、それはドキュメントに存在しますが、それはスクリプトで使用可能な変数であるという意味ではありません。アクセスするには、まず要素を取得してから、その要素の値を取得する必要があります。

document.getElementById('name').value

もう 1 つ考えられるのは、同一オリジン ポリシーです。に完全な URL を使用するのではなくopen、相対 URL を渡すだけです。

xmlhttp.open("GET", "something.php" /* ... */, true);
于 2013-07-02T04:37:22.233 に答える
2

そうであってはなりechoませんreturn。return関数内でデータを返すために使用されます。

<?php
$mytext = $_REQUEST['textbox'];
echo $mytext;
?>

また、パラメータをphpファイルに送信する必要があります

xmlhttp.open("GET","scripts/handle_feedback.php?textbox=your_value",true);
于 2013-07-02T04:23:20.493 に答える
1

最初のポイント : クライアント エンドからの要求パラメーターがありませんでした。

GET リクエストのクエリ文字列でパラメーターを送信します。

var textvalue = document.getElementById("name").value;
xmlhttp.open("GET","scripts/handle_feedback.php?textbox="+textvalue ,true);

詳細については、こちらをお読みください。

2番目のポイントは次のとおりです。

' return ' ステートメントは、関数/メソッドで使用されます。ここには関数がないため、代わりに「echo」または「print」ステートメントを使用します。

<?php
$mytext = $_REQUEST['textbox'];
echo $mytext;
?>
于 2013-07-02T04:38:00.670 に答える