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

我想在服务器和客户端之间传递json对象。服务器端看起来像这样：eventListener按钮在HTML客户端和node.js服务器之间交换数据

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":"[email protected]","password":"101010"}); 
    xmlhttp.send(data); 
} 
</script>

现在，在点击控制台日志“我在这里”触发罚款，但该函数返回代码的POST部分404错误。我也不完全了解如何将数据从服务器传回客户端。方法res.end()是否是正确的方法？

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

来源

2017-04-12 Copperwire

2改变我看需要制作

正如@charietfl所提到的那样，您可能只需包含express端点的路径即可简化您的xmlhttp.open()呼叫。

您目前没有拨打您的/callback端点，因此我会将其放入您的xhtmlhttp.open()调用中。

喜欢的东西xmlhttp.open('POST', '/callback')

正如@Bshaps提到的，你也有期待一个GET要求端点，但使用的是POST因此更改

app.get("/callback"...

到

app.post("/callback"...

来源

2017-04-12 18:34:26

谢谢，这工作出色。但是，我仍然坚持如何将对象发送回客户端。如果你能阐明一点，我会非常感激。 – Copperwire

问题是您的服务器正在收到一个帖子请求，但您的路由是为了获取请求。

变化：

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

要：

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

来源

2017-04-12 16:49:49 BShaps

检查浏览器开发工具网络实际要求。可能会看到请求是'http://localhost:8080/localhost:8080 ...添加协议URL中使用

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

或者只是将其设置为：

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

，并添加post路由服务器端

来源

2017-04-12 16:50:04 charlietfl

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

回答

相关问题