时间戳

首页 > 解决方案 > AJAX Express 在客户端接收数组

arrays - AJAX Express 在客户端接收数组

问题描述

我在接收阵列数据时遇到问题，因为它从另一个来源流入我的客户端。我的目标是让 HTML 文档在服务器接收到数组时填充数组中的数据。

服务器：

const keywordsList = [];

const keywordsListSerialize = JSON.stringify(keywordsList);
const arrayToString = JSON.stringify(Object.assign({}, keywordsList))
// const keywordsListObject = JSON.parse(arrayToString);

app.use(cors())
const bodyParser = require('body-parser');

app.get('/', (req, res) => {
  // res.writeHead(200, {
  //     'Connection': 'keep-alive',
  //     'Content-Type': 'text/event-stream',
  //     'Cache-Control': 'no-cache',
  //   });
    //res.flushHeaders();
    res.send(keywordsList);
    //res.write(arrayToString);
  //res.status(200).send(arrayToString);
  //res.status(500).send({ error: 'something blew up' })
});

正如您从服务器代码中看到的那样，我尝试了多种将数据作为 JSON 对象/只是一个数组或一个字符串发送的变体，但我似乎无法让它出现在我的客户端上。

客户：

var xhttp = new XMLHttpRequest();
console.log(xhttp);
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      console.log(xhttp.responseText)
      var jsonObj = JSON.parse(xhttp.responseText);
      for(i = 0; i < jsonObj.length; i++) {
        document.getElementById("keywordsList").innerHTML = jsonObj;
      }
    }
  };
xhttp.open("GET", "/", true);
xhttp.send();

客户端做了两件非常基本但有趣的事情。1. xhttp.responseText 是整个 HTML 文件，这让我觉得我应该在我的服务器中以某种方式处理请求（我想我可以摆脱不断向客户端传输数据）和 2. 向我发送一个错误

VM812:1 Uncaught SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttpRequest.xhttp.onreadystatechange

我相信我有多个问题。我知道我几乎肯定希望将数据作为 JSON 对象发送并在客户端解析它，但在最基本的示例中，我什至无法让它工作。我已经仔细检查了我的客户端和服务器设置是否正确，如果需要，我可以讨论如何设置以确保它们在本地正确链接。

我正在寻找指导以及可能的技术答案。请不要只链接我的 ajax 文档，因为此时我可能已经阅读了 3 次（最少）。我想把所有东西都扔掉并使用 websocket，因为它可以完成我想要实现的目标，但这意味着要学习所有这些。

感谢您的时间。

标签： arraysjsonajaxexpressweb-development-server

解决方案

服务器：

const express = require('express')
const app = express()
const port = 3000

const keywordsList = ['apple', 'banana', 'cucumber']
app.get('/', (req, res) => {
  res.send(JSON.stringify(keywordsList))
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

测试网络服务器：

curl http://localhost:3000

["apple","banana","cucumber"]

迭代客户端中的响应：

const arrayOnClientSide = JSON.parse(xhttp.responseText);
arrayOnClientSide.forEach(element => console.log(element));

输出：

apple
banana
cucumber

请注意，每次调用时，.innerHTML您都会覆盖它之前保存的任何值，因此首先构造显示值的表示格式，然后将其分配给innerHTML最后。

推荐阅读