Question

我正在尝试构建一个具有2个功能的简单Web： 1.从服务器获取字符串（短信）消息，并在屏幕上显示 2.将表格数据发送（发布）到服务器，发送回数据，将被记录。

服务器代码：

app.get('/sms', function (req, res) {   
   var smsMsg = fs.readFileSync('sms.txt');
   console.log('Read File: ' + smsMsg.toString());
   res.send(smsMsg.toString());   
})

app.post('/result', function (req, res) {      
   console.log('Got Personal Information: ' + req.body.firstName + " " + req.body.lastName);   

   response = {
       first_name:req.body.firstName,
       last_name:req.body.lastName,
       id:'0399'
   };
   console.log(response);

   // value to a JSON string 
   res.setHeader('Content-Type', 'application/json');  
   res.send(JSON.stringify(response));
})

客户端代码：

<body>      

     <p>    
        <button onclick="sendRequestForSms()"> Get SMS From Server </button>
        </br>
        <h1 id="smsId"> SMS: <h1>
        </br>
     </p>
     <p>
        <form action="/result" method="post">       
            <fieldset>
                <legend>Personal information:</legend>
                 First name: 
                <input type="text" name="firstName">
                <br>
                Last name:
                <input type="text" name="lastName">
                <br>
                <input type="submit" value="Submit" id="submit">
            </fieldset>
        </form> 
     </p>

    <script type="text/javascript">


            var xmlhttp;
            if (window.XMLHttpRequest) 
            {
                xmlhttp = new XMLHttpRequest();
            }
            else 
            {
                // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            xmlhttp.onreadystatechange = function() 
            {       
                  console.log('State: ' + xmlhttp.readyState + ' status: ' + xmlhttp.status);           
                  // 1: server connection established
                  // 4: request finished and response is ready
                  // 200: "OK"
                  // 404: Page not found
                  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
                  {
                        if (xmlhttp.getResponseHeader('Content-Type') == 'application/json') 
                        {
                            console.log('Got Json');
                            var myArr = JSON.parse(xmlhttp.responseText);
                            console.log(myArr);
                        }
                        else
                        {
                            document.getElementById("smsId").innerHTML = xmlhttp.responseText;  
                        }   


                  }
            };

            function sendRequestForSms() {              
                xmlhttp.open("GET", "/sms", true);
                xmlhttp.send();     
            }                                       
        </script>

</body>

当用户点击“从服务器获取短信”时，我会得到结果并将其显示在相关元素上（'smsId'）。
但是:(当用户提交表单时，我正在使用json数据获取新页面（例如：'{“first_name”：“test1”，“last_name”：“test2”，“id” ： “0399”}“）所以我是客户端代码行：console.log('Got Json'); 未到达，为什么不调用客户端回调函数？

我做错了什么？

Answer 1

永远不会打印

Got Json，因为/result（服务器）当前设置为仅回显它发送的JSON。看起来它正在从表单发送正确的信息，但你现在设置的方式“Got Json”只会从你的“获取短信”按钮打印出来。为了做你想要做的事情，你尝试做的方式，你需要让/result输出一个新页面，打印出你想要在提交后运行的javascript。那有意义吗？我可以澄清一下。

使用XMLHTTPRequest的示例

<div id="id01"></div>
<script>
var xmlhttp = new XMLHttpRequest();
var url = "http://www.w3schools.com/json/myTutorials.txt";

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var myArr = JSON.parse(xmlhttp.responseText);
        myFunction(myArr);
    }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' + 
        arr[i].display + '</a><br>';
    }
    document.getElementById("id01").innerHTML = out;
}
</script>

来源：http://www.w3schools.com/json/json_http.asp

直播示例：http://www.w3schools.com/json/tryit.asp?filename=tryjson_http

为什么我得到无法显示的纯json数据

1 个答案: