爲什麼我得到的純json數據無法顯示

我試圖建立一個簡單的網站，它有2個功能： 1.從服務器獲取字符串（sms）消息，並將其顯示在屏幕上 2發送（發佈）表單數據到發送回數據的服務器，這些數據將被記錄。爲什麼我得到的純json數據無法顯示

服務器代碼：

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'); 沒有達到，爲什麼客戶端回調函數不叫

我在做什麼錯

來源

2015-11-19 user3668129

您沒有任何代碼來處理，所以瀏覽器發佈表單並正常加載結果。 – SLaks

服務器是否打印有'''有個人信息？''' – jaggedsoft

Got Json是永遠將被打印，因爲/result（服務器）目前設置爲只響應它發送的JSON。它看起來像bei ng從表單發送了正確的信息，但您現在設置的方式「Got Json」只能通過「獲取短信」按鈕進行打印。要做你想要做的事情，你試圖做的事情，你需要輸入一個新的頁面，輸出你希望在提交後運行的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

來源

2015-11-19 06:14:34 jaggedsoft

爲什麼我得到的純json數據無法顯示

回答

相關問題