使用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