在javascript中获取发送到服务器端的客户端用户名答案

【问题标题】：get client username sent to server side in javascript在javascript中获取发送到服务器端的客户端用户名
【发布时间】：2019-03-21 05:28:51
【问题描述】：

如何在 javascript 中将表单输入从客户端传递到服务器？下面是客户端。我想获取一个用户名或在文本框中输入的任何内容，并将其发送到 server.js，在那里将对其进行处理以进行验证。问题是我需要将来自 client.js 的数据存储在 server.js 的一个变量中，以便能够检索它。

 var textbox;
 var dataDiv;
 window.onload = init;

function init(){
    textbox = document.createElement("input");
    textbox.id="textbox";
    dataDiv = document.createElement("div");
    var header = document.createElement("h1");
    header.appendChild(document.createTextNode("Select User"));
    var button = document.createElement("BUTTON");
    button.id = "myBtn";
    var textBtn = document.createTextNode("Click me");
    button.appendChild(textBtn);
    button.addEventListener("click", () => {
    sendData();
});

var docBody = document.getElementsByTagName("body")[0];//Only one body

    docBody.appendChild(header);
    docBody.appendChild(dataDiv);
    docBody.appendChild(textbox);
    docBody.appendChild(button);
}

function sendData(){
     var usrName = document.getElementById("textbox").value; //I want to send it to server.js
     var xhttp = new XMLHttpRequest();
     xhttp.onreadystatechange = function() {
     if (this.readyState == 4 && this.status == 200) {
           var dataObj = JSON.stringify(this.responseText);
           dataDiv.innerHTML = dataObj;
     }
 };
 xhttp.open("GET", "/register", true);
 xhttp.send();
}

这是服务器端

 var express = require('express');
 var app = express();
 app.get('/register', handleGetRequest); //how do I pass usrName here?
 app.use(express.static('public'));
 app.listen(5000);

 function handleGetRequest(request, response){
      var pathArray = request.url.split("/");
      var pathEnd = pathArray[pathArray.length - 1];
      if(pathEnd === 'register'){
          response.send("{working}");
      }
      else
         response.send("{error: 'Path not recognized'}");
}

【问题讨论】：

如何使用 HandleGetRequest 提取客户端发送的数据？
\register 应该是 /register
/register 应该是localhost:5000/register。 Express (API) 在不同的 (5000) 端口上运行，因此您遇到 404 错误。
@isidat 我收到此错误 Uncaught TypeError: Cannot set property 'innerHTML' of null at XMLHttpRequest.xhttp.onreadystatechange (client.js:29)
@isidat 想知道一些事情。我唯一的目标是将数据传输到服务器端。我可以使用 cookie 吗？

标签： node.js ajax post get xmlhttprequest

【解决方案1】：

如果使用GET，则必须将参数放在URL中。

xhttp.open("GET", "/register?usrName=" + encodeURIComponent(usrName), true);

请参阅How to get a URL parameter in Express?，了解如何在 Express 中读取查询参数。

【讨论】：

xhttp.send(...) 总是给出错误 404。你能帮我解决这个问题吗？我对此完全陌生。
如果您收到404 错误，那么您在xhttp.open() 中没有提供正确的URL。
我添加了我的完整代码。我仍然收到错误 404。我真的不知道如何继续...请帮助我。
在删除的答案中，您评论说 URL 是 localhost:8000/register。 Express 在服务器上运行，但localhost 是客户端。
这是一个学校项目，我们必须使用 localhost 创建一个网页。服务器地址应该是什么？

【解决方案2】：

发送数据：

function sendData(){
  var usrName = document.getElementById("textbox").value; //I want to send it to server.js
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
          var dataObj = JSON.stringify(this.responseText);
          dataDiv.innerHTML = dataObj;
      }
  };
  xhttp.open("GET", "http://localhost:5000/register?usrName=" + encodeURIComponent(usrName), true);
  xhttp.send();
}

读取数据：

function handleGetRequest(request, response){
  var urlParts = request.url.split("?");
  if(urlParts[0] === '/register'){
      var usrName = urlParts[1].replace('usrName=', '');
      response.send("{" + usrName + "}");
  }
  else
    response.send("{error: 'Path not recognized'}");
}

【讨论】：