Javascript 按钮上的eventListener可在HTML客户端和node.js服务器之间交换数据

我试图在服务器和客户端之间传递一个json对象。到目前为止，服务器端看起来像：

var express = require('express'); // Express web server framework
var request = require('request'); // "Request" library
var querystring = require('querystring');
var cookieParser = require('cookie-parser');
var bodyParser = require("body-parser");


var app = express();
app.use(express.static("public"));

app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

app.post("/", function (req, res) {

    console.log('Request received');
    var return_value;

    req.on('data', function (chunk) {
        console.log('GOT DATA!');
        json = JSON.parse(chunk);
        json.access_date  =  "12.04.17";
        return_value = JSON.stringify(chunk);
    });

    res.writeHead(200, { 
        'Content-Type': 'application/json;charset=UTF-8',
        'Access-Control-Allow-Origin': '*' 
    });
    res.json(return_value);

})


var server = app.listen("8080")
console.log('Server running port 8080/');

在按钮上附加以下功能

<script type="text/javascript">
document.getElementById("myBtn").addEventListener("click", passArg);

function passArg() {
    console.log("I'm here")
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.open("POST", "/", true);
    xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
           if (xmlhttp.status == 200) {
                //var json = JSON.parse(xmlhttp.responseText);
                console.log("Data passed back: " + xmlhttp.responseText)
           }
           else if (xmlhttp.status == 400) {
              alert('There was an error 400');
           }
           else {
               alert('something else other than 200 was returned');
           }
        }
    }

    var data = JSON.stringify({"email":"hey@mail.com","password":"101010"});
    xmlhttp.send(data);
}
</script>

document.getElementById（“myBtn”）.addEventListener（“单击”，passArg）；
函数passArg（）{
log（“我在这里”）
var xmlhttp=new XMLHttpRequest（）；
open（“POST”，“/”，true）；
setRequestHeader（“内容类型”，“应用程序/json；字符集=UTF-8”）；
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==XMLHttpRequest.DONE）{
if（xmlhttp.status==200）{
//var json=json.parse（xmlhttp.responseText）；
log（“传回的数据：+xmlhttp.responseText”）
}
else if（xmlhttp.status==400）{
警报（“出现错误400”）；
}
否则{
警报（“返回了200以外的内容”）；
}
}
}
var data=JSON.stringify（{“email”：”hey@mail.com“，”密码“：“101010”}）；
发送（数据）；
}

现在，单击控制台日志“I'm here”会触发正常，但函数会在代码的POST部分返回404错误。我也不完全理解如何将数据从服务器传回客户机。方法

res.end（）

是否正确

---

编辑：我编辑了脚本以反映答案。

问题是您的服务器正在接收post请求，但您的路由是get请求

更改：

app.get("/callback", function(req, res){

致：

---

检查浏览器开发工具网络中的实际请求。很可能会看到请求为

http://localhost:8080/localhost:8080

。。。将协议添加到所使用的url

xmlhttp.open("POST", "http://localhost:8080")

或者将其设置为：

xmlhttp.open("POST", "/")

---

并添加一个

post

路由服务器端

2个我认为需要进行的更改

1

正如@charietfl所提到的，只需包含

express

端点的路径，就可以简化

xmlhttp.open（）

调用

您当前没有调用

/callback

端点，因此我将把它放在

xhtmlhttp.open（）

调用中

类似于

xmlhttp.open（'POST'，'/callback'）

2

正如@Bshaps所提到的，您还有一个端点需要一个

GET

请求，但您使用的是

POST

，因此发生了变化

app.get("/callback"...

到

---

谢谢，效果很好。然而，我仍然停留在如何将对象发送回客户端的问题上。如果你能解释一下，我会非常感激的。

app.get("/callback"...

app.post("/callback"...