将数据从客户端 javascript 页面发布到节点服务器答案

【问题标题】：POST data from a client javascript page to a node server将数据从客户端 javascript 页面发布到节点服务器
【发布时间】：2016-07-02 18:10:50
【问题描述】：

是否可以使用 AJAX XMLHttpRequest() 将数据从客户端 javascript 页面发布到节点服务器 (server.js)？我正在寻找的是 javascript 代码，它将接收节点服务器上的数据，特别是 member_nm （“newName”）和 member_email （“mail@google.com”）的值。我控制服务器。我也知道我也可以使用 GET 通过查询字符串发送文本值。下面是通过事件处理程序从客户端 javascript 页面发送的请求：

document.getElementById("btnAddMember").addEventListener("click", function()
{
  var request = new XMLHttpRequest();
  var path = "/Users/Admin/WebstormProjects/projectName/server.js";
  request.onreadystatechange = function()
  {
    if ( request.readyState === 4 && request.status == 200 )
    {
      request.setRequestHeader("Content-Type", "text/plain; charset=UTF-8");
      request.open("POST", path, true);
      request.send("member_nm=newName&member_email=mail@google.com"); 
    }
  };
});

【问题讨论】：

stackoverflow.com/questions/9713058/… 的可能重复项？
或stackoverflow.com/questions/12006417/…的副本？
第一个“可能重复”询问如何制定 XMLHttpRequest 这不是我的问题。我包含的代码回答了“可能重复”中提出的问题，它没有为我提供答案。
第二个“重复”确实包含一个解决方案，如果使用带有 express 的节点（我就是这样）。我会看看它。谢谢...
“可能的重复”与个人无关，只是让您快速获得好答案的一种方式。

标签： javascript ajax node.js http

【解决方案1】：

你需要设置你的服务器来接受这个发布请求，最简单的方法是使用 Express 和 bodyParser 中间件，像这样：

var express = require('express');
var    server=express();
var    bodyParser= require('body-parser'); 

server.use(bodyParser.json());

server.post('/', function(req, res){
  if(req.body){
   // get the params from req.body.paramName
}
});

server.listen(8222, function(){
  console.log('listening for requests ..')
});

在您的客户端代码中将“路径”更改为指向服务器 url:port，我会将这些放在 onReadyStateChange 之外：

request.setRequestHeader("Content-Type", "text/plain; charset=UTF-8");
  request.open("POST", path, true);
  request.send("member_nm=newName&member_email=mail@google.com");

【讨论】：

【解决方案2】：

这是一个关于如何使用 Express 将客户端 javascript 文件中的变量 POST 到 Node 服务器的有效解决方案。 POST 通过事件处理程序 btnAddMember 在客户端上启动。 txtName.value 和 txtMembershipType.value 包含要发布的值。请注意正确解析值所需的语法。 member_nm 和 member_type 将用于引用节点服务器上的属性。首先是客户端javascript：

document.getElementById("btnAddMember").addEventListener("click", function()
{
  var request = new XMLHttpRequest();
  var path = "http://0.0.0.0:0000"; // enter your server ip and port number
  request.open("POST", path, true); // true = asynchronous
  request.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
  var text= '{"member_nm":"' + txtName.value + '","member_type":"' + txtMembershipType.value + '"}';
  request.send ( text );
});

接下来是服务器端代码。请注意，bodyParser 现在必须作为 node_module 添加到您的项目中。这可以通过节点程序管理器 (npm) 来完成。 POST 语句基本上使用名为“member”的变量将 req.body 从 JSON 格式解析为 javascript 对象格式。然后，代码会记录两个变量 member_nm 和 member_type 的发布值。最后，如果 POST 成功，则向客户端发送响应状态。

var bodyParser = require("body-parser");
...
app.use(bodyParser.text({ type: "application/json" }));
...
// receive the POST from the client javascript file
app.post("/", function (req, res)
{
  if (req.body)
  {
    var member = JSON.parse( req.body ); // parse req.body as an object
    console.log("member_nm: " + member.member_nm );
    console.log("member_type: " + member.member_type );
    res.sendStatus(200); // success status
  }
  else
  {
    res.sendStatus(400); // error status
  }
});

【讨论】：