Javascript 带有POST方法的AJAX请求不'；行不通

因此，这是一个待办事项应用程序，其工作原理是在输入字段中写入一个项目，然后将其存储为对象的

数组，然后使用
EJS
显示数据

我使用了一个
AJAX
请求（通过使用
XHR
）来访问url和其他东西，但它似乎根本不起作用，实际上我做了一些测试，整个提交事件函数似乎都不起作用，但即使如此，我还是尝试使用
JSON.stringify
和
JSON.parse
，但它给了我一个
错误“位置0处的预期令牌0”

怎么了？我使用
Express.js
进行服务器渲染，
EJS
作为视图引擎，使用Javascript发送请求

设置服务器内容（一个单独的模块，应用程序稍后将成为
express
的模块）：

HTML文件（使用EJS）：

每当我运行它时，它根本不起作用，它没有将item对象添加到数组中，当我按下submit按钮时，页面一直在加载，并且在Dev tools的Network部分中没有显示任何内容。它似乎根本不起作用。哎呀，甚至
的
控制台.log
也成功了“
没有显示，这意味着它与该函数有关，但我就是想不出来

另外，当我执行
console.log（req.body）
时，它会显示一个空对象，这也意味着该函数中存在问题，它似乎没有发送数据或其他东西。有什么帮助吗？
您需要阻止表单实际提交表单：

form.addEventListener("submit", function(event) {
  event.preventDefault()

更多信息请点击此处-
您的问题在以下html行中：

<button type="submit" id="Add" onsubmit="return false">Add</button>

添加

使用onclick更改onsubmit：

<button type="submit" id="Add" onclick="return false">Add</button>

添加

：提交表单时触发提交事件

请注意，提交仅在表单元素上触发，而不是按钮或提交输入。（提交的是表格，而不是按钮。）

另一种解决方案是：将type=“submit”更改为type=“button”
当您向“/todo”发送帖子时，您没有完成请求；服务器没有任何东西可以告诉客户端请求已经完成，因此网页一直在旋转

当操作像这样完成时，发送一个确定或无响应的HTTP状态代码（204）

app.post("/todo", urlencoded, function(req, res) {
  items.push(req.body);
  res.sendStatus(200);
});

您向表单中添加了一个事件侦听器，但在其中您不提交表单，而是将另一个事件侦听器添加到请求的
onreadystatechange
事件中。然后在里面尝试一个
send（）
。由于请求的状态不会仅更改b本身，因此我们的
send（）
方法将永远不会运行。我想你想做的是这样的：

form.addEventListener("submit", function() {
  request.onreadystatechange = function() {
    if (request.readyState == 4 && request.status == 200) {
      console.log("Yaay succeeded");
    }
  };
  request.send(readyValue);
});

这定义了处理响应的
onreadystatechange
事件的事件处理程序，之后实际上也会发送请求，因此当您有响应时，事件处理程序将启动，并运行处理响应的代码。
这应该是您在前端寻找的

let form = document.querySelector("form");
form.addEventListener("submit", function() {
  let request = new XMLHttpRequest();
  let valueToAdd = document.querySelector("input").value;
  let readyValue = { item: valueToAdd };

  request.open("POST", "/todo");
  request.send(JSON.stringify(readyValue));

  request.onreadystatechange = function() {
  if (request.readyState === 4) {
    if(request.status === 200) {
      console.log("Yaay succeeded");
    } else {
      console.log(request.status);
    }
  }
 };
});

在提交处理程序内部，您需要阻止默认的表单操作-您还需要在其中创建XHR，而不是在其外部（您可能会尝试重新使用XHR对象）@JaromandaX我这样做了，还在其中创建了XHR，但现在页面不会重新加载，但也不会发送/返回任何内容。现在，当我点击按钮时，什么也没发生。有人帮忙吗？是我做的。它仍然不起作用。现在，每当我点击按钮，没有任何东西被发送或接收。我做到了。它仍然不起作用。现在，每当我点击按钮时，都不会发送或接收任何内容。这是第二个问题：您的ajax调用不完整。那么我如何修复并完成它？我做到了。它仍然不起作用。现在，每当我点击按钮时，都不会发送或接收任何内容。我相信问题出在JS XHR函数中，我认为它不会发送任何数据，这就是req.body为空的原因。@Boypro尝试在“request.onreadystatechange”事件侦听器之前添加“request.send（readyValue）；”。现在，您得到了一个响应，然后尝试向服务器发送数据。在我应用上一个解决方案之前，现在情况得到了一些改善，每当我在if条件下执行console.log（request）时，状态始终等于0，这意味着没有任何请求，现在当我移动request.send时，在if条件之前（如您所说），现在，它显示了更多对象的细节，比如status=200（Ok）和state=4，即使url很好。它仍然不能正常工作，但我认为这是向前迈出的一步。还有什么想法吗？请查看我发布的最新答案。我们可以解决那个@BoyproIt仍然不起作用。与其他解决方案一样，我现在单击按钮时不会发生任何事情。没有任何更改，抱歉）：与往常一样，当我按下提交按钮（onclick=return false）时，它根本不会发送任何内容。当我删除“onclick=returnfalse”时，它会重新加载带有“OK”文本的页面。这个解决方案中的新东西是当我应用它时，现在它没有显示任何console.log）：还有什么想法吗？哦，我忘了提到一些重要的东西。当我发现“提交”事件不起作用时。我更改了它单击，它仍然不能完全工作，但在（应用我们的解决方案之前）它显示console.logs，这就是为什么它这样做。因为我从提交改为单击。我只是觉得这可能是一个重要的想法。我忘了把表单变量的定义放在实际事件监听器之外。这至少可以让事件侦听器正常工作是的，我知道。当我知道你忘了把它放在事件处理程序之外时，我自己做了。问题似乎很复杂。我想我要么使用fetchapi，甚至jQuery重新开始，要么等待解决方案。我将代码添加到这个fiddle中，请求按预期发送。如果控制台将req.body记录在nodejs中，它是否仍显示为空白？
app.post("/todo", urlencoded, function(req, res) {
  items.push(req.body);
  res.sendStatus(200);
});

form.addEventListener("submit", function() {
  request.onreadystatechange = function() {
    if (request.readyState == 4 && request.status == 200) {
      console.log("Yaay succeeded");
    }
  };
  request.send(readyValue);
});

let form = document.querySelector("form");
form.addEventListener("submit", function() {
  let request = new XMLHttpRequest();
  let valueToAdd = document.querySelector("input").value;
  let readyValue = { item: valueToAdd };

  request.open("POST", "/todo");
  request.send(JSON.stringify(readyValue));

  request.onreadystatechange = function() {
  if (request.readyState === 4) {
    if(request.status === 200) {
      console.log("Yaay succeeded");
    } else {
      console.log(request.status);
    }
  }
 };
});