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 个答案: