使用AJAX從服務器發送和接收信息

Question

我正在一個應該通過AJAX與服務器交互的頁面上工作，但是我在AJAX方面的經驗非常有限。 該頁面的工作方式如下。

單擊該按鈕時，如果單擊“測試”單選按鈕，則僅顯示一個彈出窗口，表明輸入有效。 單擊該按鈕后，如果單擊“實時”單選按鈕，則該程序應使用URL“ http://cs.sfasu.edu/rball/351/exam2.php ”向服務器發送請求。輸入框的內容是“名稱”參數的值。 然后，該頁面將發回一個我需要解析為常規變量的JSON對象。

我將其余的JSON內容保留下來，因為這不是我要的。

到目前為止，我已經完成了頁面的設計，但是就像我說的那樣，我真的不知道我在使用AJAX東西做什么。 我為此編寫了一些代碼，但不確定是否正確。

這是我的代碼：

<html>
    <head>
        <title>anner, Taylor</title>

        <style type = "text/css">
            canvas {
                border: 2px solid black;
            }
        </style>

        <script type = "text/javascript">
            window.onload = function() {
                var TTcanvas = document.getElementById("myCanvas");
                var TTcontext = TTcanvas.getContext("2d");

                TTcontext.strokeStyle = "red";
                TTcontext.fillStyle = "red";
                TTcontext.fillRect(250,50,100,100);
                TTcontext.stroke();

                TTcontext.beginPath();
                TTcontext.moveTo(600, 0);
                TTcontext.lineTo(0, 200);
                TTcontext.lineWidth = 5;
                TTcontext.strokeStyle = "black";
                TTcontext.stroke();

            }

            function validate() {
                var TTinput = document.getElementById("3letters").value;

                if(TTinput.length < 3 || TTinput.length > 3) {
                    alert("Please enter 3 letters");
                }

                var TTtest = document.getElementById("test");
                var TTlive = document.getElementById("live");

                if(TTtest.checked == true) {
                    alert("Input is valid");
                }
                else if(TTlive.checked == true) {
                    return ajaxStuff();
                }
            }

            function ajaxStuff() {
                var TTrequest = new XMLHttpRequest();
                TTrequest.open("GET", "http://cs.sfasu.edu/rball/351/exam2.php?name=TTinput.value", true);
                TTrequest.send();
                var TTresponse = TTrequest.responseText;
                TTrequest.onreadystatechange=function() {
                            if(TTrequest.readyState==4 && TTrequest.status==200) {
                                           document.getElementById("myDiv").innerHTML.TTresponse;
                            }
                        }
            }       
        </script>
    </head>

    <body>
        <h1>Tanner, Taylor</h1>

        <canvas id = "myCanvas" width = "600" height = "200"></canvas> <br>

        <form>
            Enter 3 letters: <input type="text" id="3letters"> <br>
            <input type = "radio" id = "test" value = "test">Test
            <input type = "radio" id = "live" value = "live">Live <br>
            <input type = "button" id = "check" value = "Send" onclick="validate()">
        </form>

        <div id="myDiv">

        </div>
    </body>
</html>

這是我服務器上頁面的鏈接：

cs.sfasu.edu/cs351121/exam2.html

另外，我知道它說的是考試，但這實際上只是我們對下周的實際考試的審查。 我只是想弄清楚它是如何工作的，但不知道我在做什么錯。

Answer 1

我不確定是什么問題。 代碼正確

好吧，我明白了。 您正在范圍之外調用請求變量。 您在ajaxStuff函數中聲明了request變量，因此只能在該區域訪問。 這就是為什么它是不確定的。 嘗試這個：

 function ajaxStuff() {
                        var TTrequest = new XMLHttpRequest();
                TTrequest.open("GET", "http://cs.sfasu.edu/rball/351/exam2.php?name=TTinput.value", true);
                        TTrequest.send();

                TTrequest.onreadystatechange=function() {
                            if(TTrequest.readyState==4 && TTrequest.status==200) {
                                    document.getElementById("myDiv").innerHTML=TTrequest.responseText;
                            }
                        }
            }

得到結果只是這樣做

TTrequest.send();
var response=TTrequest.responseText;

Answer 2

我知道，我沒有看到jQuery標簽，但是如果沒有框架限制，請考慮一下。

例：

$("button").click(function(){
   $.ajax({url:"demo_test.txt",success:function(result){
     $("#div1").html(result);
   }});
 });

使用AJAX從服務器發送和接收信息

問題描述

2 個解決方案

解決方案1
1 已采納 2014-10-31 01:50:28

解決方案2
0 2014-10-31 03:19:54

使用AJAX從服務器發送和接收信息

問題描述

2 個解決方案

解決方案1 1 已采納 2014-10-31 01:50:28

解決方案2 0 2014-10-31 03:19:54

解決方案1
1 已采納 2014-10-31 01:50:28

解決方案2
0 2014-10-31 03:19:54