將客戶端JavaScript中的JSON對象傳遞給NodeJS

我有一個基於用戶輸入創建JSON對象的網頁。然後，我想以某種方式允許用戶將此JSON對象提交給NodeJS腳本以處理/插入到MySQL數據庫中。然而，我真的不知道如何做這樣的事情 - 我能想到的最好的方式是某種形式的POST，但我不確定從哪裏開始。將客戶端JavaScript中的JSON對象傳遞給NodeJS

因爲我不知道這樣的方法會被描述爲什麼，所以我在尋找任何教程或其他在線資源方面都沒有太大的成功。

任何人都可以提出一些文章或文檔來看待這將是相關的這樣的事情？或者，至少，告訴我要搜索什麼？謝謝。

編輯：這是我正在努力工作的代碼。我只是試圖將POST數據類型從字符串轉換爲雙方的JSON。

Serverside集團：

var express = require('express'); 
var fs = require('fs'); 
var app = express(); 

app.use(express.bodyParser()); 

app.get('/', function(req, res){ 
    console.log('GET /') 
    //var html = '<html><body><form method="post" action="http://localhost:3000">Name: <input type="text" name="name" /><input type="submit" value="Submit" /></form></body>'; 
    var html = fs.readFileSync('index.html'); 
    res.writeHead(200, {'Content-Type': 'text/html'}); 
    res.end(html); 
}); 

app.post('/', function(req, res){ 
    console.log('POST /'); 
    console.dir(req.body); 
    res.writeHead(200, {'Content-Type': 'text/html'}); 
    res.end('thanks'); 
}); 

port = 8080; 
app.listen(port); 
console.log('Listening at http://localhost:' + port)

客戶方：

<html> 
<body> 
    <form method="post" action="http://localhost:8080"> 
     Name: <input type="text" name="name" /> 
     <input type="submit" value="Submit" /> 
    </form> 

    <script type="text/JavaScript"> 
     console.log('begin'); 
     var http = new XMLHttpRequest(); 
     var params = "text=stuff"; 
     http.open("POST", "http://localhost:8080", true); 

     http.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
     //http.setRequestHeader("Content-length", params.length); 
     //http.setRequestHeader("Connection", "close"); 

     http.onreadystatechange = function() { 
      console.log('onreadystatechange'); 
      if (http.readyState == 4 && http.status == 200) { 
       alert(http.responseText); 
      } 
      else { 
       console.log('readyState=' + http.readyState + ', status: ' + http.status); 
      } 
     } 

     console.log('sending...') 
     http.send(params); 
     console.log('end'); 

    </script> 

</body> 
</html>

來源

2014-01-30 erythraios

一個帖子是正確的，如果你想這樣做而不刷新頁面，你需要AJAX。你還需要一個路徑來捕獲你的服務器上（在Express中，類似於'app.post（「/ api/test」）' – tymeJV

下面是使用jQuery做POST請求和快速的應用程序一個非常簡單的例子。我認爲這應該是一個體面的起點。

// client side, passing data to the server 
$.post("/foo/", { data : { foo : "bar" } }, function(temp) { 
    // temp === "I am done";  
}); 

// serverside app.js 

var express = require("express"); 

var app = express(); 

// will parse incoming JSON data and convert it into an object literal for you 
app.use(express.json()); 
app.use(express.urlencoded()); 

app.post("/foo/", function(req, res) { 
    // each key in req.body will match the keys in the data object that you passed in 
    var myObject = req.body.data; 
    // myObject.foo === "bar" 
    res.send("I am done"); 
});

編輯： JSON.stringify（）和JSON.parse（）將序列化/反序列化JSON。（jQuery讓這很容易，但如果你想要去純JavaScript）

更改爲var params = "text=" + JSON.stringify({ foo : "bar" });

和

console.dir(JSON.parse(req.body.text));

它爲我在我的地方。

來源

2014-01-30 20:15:19 Nucleon

感謝您的示例代碼。不幸的是，我對Express仍然很陌生和Node.js在一般情況下），所以我無法得到它運行。你能指出我在這個方向正確的方向嗎？目前，我只是創建一個按鈕，應該觸發後操作，如下所示：$ .post （「localhost：8080/hello」，{data：{foo：「bar」}}，function（temp）{ alert（temp）; – erythraios

哪一部分不工作，您可以使用代碼編輯您的問題快速應用 – Nucleon

說實話，我不確定 - 我已經添加了上面的代碼。感謝您的幫助！ – erythraios

將客戶端JavaScript中的JSON對象傳遞給NodeJS

回答

相關問題