Question

我是网络开发的新手，正在为此开设课程。在挑战主项目之前，我正在设计测试Web服务器。对于这个测试，我试图从文本块中获取值，并将其附加到响应部分，同时制作它，以便在刷新页面时不会丢失数据。

目前，当我按下按钮时，它会附加：[object Object] [object Object] [object Object]

以下是此应用程序的3个文件

首先是index.html：

<html>
<head>
    <title> Website Test </title>
</head>
<body>
    <h1> Website Test </h1>
    <p> press the button </p>
    <input type="text" id="input_block">
    <button id="test_button" onclick="sendData(document.getElementById
                ('input_block').value)"> Press Me Now </button>
    <p id="response"></p>

    <script type="text/javascript" src="myScript.js"></script>
</body>
</html>

接下来是StaticServerProgram：

var express = require("express");
var bodyParser = require("body-parser");

var app = express();

app.use(bodyParser.json());

app.use(express.static('public'));

var myData = [];

app.get("/data", function(req, res){
    console.log(req.body);
    res.json(myData).ProjectName;
});

app.post("/data", function (req, res){
    console.log("POST Request to: /");
    console.log(req.body);
    res.send(req.body);
    myData.push(req.body);
});

app.listen(3000, function() {
    console.log("listening on port 3000");
})

最后是script.js：

function getData() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "/data", true)
    xhr.send();

    xhr.onreadystatechange = function(){
        if (xhr.readyState == 4 && xhr.status == 200){
            // got a response
            console.log(xhr.responseText);

            var arr = JSON.parse(xhr.responseText);
            console.log(arr);

            var s = "";
            for (var i = 0; i < arr.length; i++) {
                s+=arr[i];
            }

            document.getElementById("response").innerHTML = s;

        }
    };
}
function sendData(project_name){
    console.log("sending POST to /data");
    var obj = { ProjectName : project_name, ActivityName : "bites" };
    var postXhr = new XMLHttpRequest();
    postXhr.open("POST", "/data", true);
    postXhr.setRequestHeader("Content-type", "application/json");
    postXhr.send(JSON.stringify(obj));
    getData();
}
getData();

非常感谢对此问题的任何回应。如果有人认为将来可能存在问题，请发表评论。谢谢！

Answer 1

[object Object]的外观意味着you're converting objects to strings。

可能发生在s+=arr[i]的客户端：

var s = "";
for (var i = 0; i < arr.length; i++) {
    s+=arr[i];
}

要显示普通Object，您必须找到或创建一些内容来格式化它。一种选择是将它们转换回JSON：

s+=JSON.stringify(arr[i]);

或者，访问不是另一个对象的对象的属性。

s+=arr[i].ProjectName;

此外，这条线服务器端没有做你可能期望的事情：

res.json(myData).ProjectName;

如果您只想将项目名称发送到客户端，则必须迭代数组并创建另一个。您可以使用.map()执行此操作。

res.json(myData.map(d => d.ProjectName));

Answer 2

您收到的回复是一系列对象。您需要选择此对象内的属性以显示数据。

for (var i = 0; i < arr.length; i++) {
 s+=arr[i]['ProjectName'];
}

会将响应附加到您的元素。

Node.js＆amp; Express：推送数组结果＆＃34; [object Object]＆＃34;

2 个答案: