2

わかりました、これは奇妙です。次のコードは、テキスト入力にテキストを入力し、送信ボタンをクリックして、AJAX / PHP にこれを div 内のテキストとしてエコー バックさせる AJAX を使い始めるための入門演習となることを目的としています。このコードを 1 行ずつ実行すると、div の本来の行にテキストが表示されていることがわかります。しかし、最後の中括弧にまたがると、テキストが消えてしまいます! どうすればいいの？？理解できません。誰でも助けることができますか？ありがとう！

<!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">
    <!-- 
        window.onload = function ajaxFunction() {
            document.myform.onsubmit = getFeedback;
        }

        function getFeedback() {
            var textvalue = document.getElementById("textfield").value;
            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=textvalue;
                }
            }
            xmlhttp.open("GET","scripts/handle_feedback.php?mytext="+textvalue,true);
            //at this point in the execution, my text is displayed correctly...
            xmlhttp.send();
        } //...but when I step across this line, the text disappears!!!
    //-->
    </script>

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

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

</body>

</html>
4

3 に答える 3

5

問題は、ページ全体を送信するデフォルトのフォーム アクションをキャンセルしていないことです。

フォームには属性がないためaction、デフォルトのアクションは現在の URL に送信することです。これは、実際には現在のページをリロードするだけです。

JavaScript と ajax を介して自分でフォームを処理しているため、デフォルトのアクションは必要なく、キャンセルする必要があります。

これを修正するには、次の 2 つの方法があります。

  1. 関数falseから戻るgetFeedback()

    また...

  2. submitそもそもボタンを使わない。ボタンを に変更するとtype="button"、心配するデフォルト アクションはありません。JavaScript がなければ、そのタイプのボタンをクリックしても何も起こらないので、送信のキャンセルについて心配する必要はありません。

于 2013-07-02T06:36:13.070 に答える
2

getfeedback()で終わる必要があります:

return false;

デフォルトのフォーム送信が行われないようにします。

于 2013-07-02T06:36:41.910 に答える
0

追加: return falsegetFeedback 関数の最後に

別の可能な解決策は、jquery を使用することです。

jqueryを使用すると、簡単に使用できます

$("#mybutton").click(function(e){
    e.preventDefault()  //stops the form actually submitting
    $('#feedback').load('scripts/handle_feedback.php?mytext='+$("#textfield").val());
});

また、ボタンにIDを与える必要があります

<button type="submit" id="mybutton">Submit</button>
于 2013-07-02T06:37:44.573 に答える