Question

因此，这是一个待办事项应用程序，其工作方式是在输入字段中写入项目，然后将其存储为对象的array，然后使用EJS来显示数据。

我对网址和内容使用了AJAX请求（通过使用XHR），但似乎根本不起作用，实际上我做了一些测试，整个提交似乎事件函数不起作用，但是即使那样，我仍然尝试使用JSON.stringify和JSON.parse，但是它给了我一些"an expected token 0 at position 0"

的错误

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

设置服务器内容（一个单独的模块，App稍后将是express的模块）：

let items = [];
let bodyparser = require("body-parser");
let urlencoded = bodyparser.urlencoded({ extended: false });
module.exports = function(app) {
  app.get("/todo", function(req, res) {
    res.render("toDo", { data: items });
  });
  app.post("/todo", urlencoded, function(req, res) {
    items.push(req.body);
  });
  app.delete("/todo:item", function(req, res) {});
};

HTML文件（通过使用EJS）：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>To-do Application</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="../Public/Assets/Styles.css" />
  <script src="../Public/Scripts/Add.js" defer></script>
</head>
<body>
  <div id="todo-table">
    <form action="/todo" method="post">
      <input type="text" placeholder="Write an item here" required>
      <button type="submit" id="Add" onsubmit="return false">Add</button>
    </form>
    <ul>
      <% data.forEach(function(element){ %>
        <li> <%= element.item %> </li>
      <% }) %>
    </ul>
  </div>
</body>
</html>

用于发送AJAX请求的Javascript文件：

let form = document.querySelector("form");
let request = new XMLHttpRequest();
request.open("POST", "/todo");
let valueToAdd = document.querySelector("input").value;
let readyValue = { item: valueToAdd };
form.addEventListener("submit", function() {
  request.onreadystatechange = function() {
    if (request.readyState == 4 && request.status == 200) {
      request.send(readyValue);
      console.log("Yaay succeeded");
    }
  };
});

每当我运行它时，它根本不起作用，它不会将item对象添加到数组中，当我按下Submit按钮时，页面会不断加载，并且在Dev工具的Network部分中没有任何显示。似乎根本不起作用。哎呀，甚至console.log中的"Yaay succeeded"都没有出现，这意味着它与该功能有关，但我只是想不通。

另外，当我执行console.log(req.body)时，它显示一个空对象，这再次表示问题出在该函数中，似乎它没有发送数据或其他内容。有帮助吗？

Answer 1

您需要阻止表单实际提交表单：

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

此处的更多信息-https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

Answer 2

您的问题在以下html行中：

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

使用onclick更改onsubmit：

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

From MDM：提交表单时会触发Submit事件。

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

另一个解决方案可以是：将type =“ submit”更改为type =“ button”

Answer 3

将POST发送到“ / todo”时，您尚未完成请求；服务器没有任何内容可告知客户端请求已完成，因此该网页永远保持旋转状态。

像这样完成操作后，发送HTTP状态代码“确定”或“无响应”（204）

<HEAD>
  <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
  <TITLE></TITLE>
    <meta property="al:android:url" content="duckduckduck://story/1234">
    <meta property="al:android:package" content="il.co.anykey.games.duckgames.duckduckduck">
    <meta property="al:android:app_name" content="DuckDuckDuck"/>
    <meta property="og:url" content="http://anykey.co.il/deeplinks/duckduckduck.html"/>
    <meta property="og:title" content="Duck Duck Duck" />
    <meta property="og:description" content="*** HERE I NEED TEXT TO COME FROM THE URL PARAMETER ***" id="message"/>
    <meta property="og:type" content="website" />
    <meta property="og:image" content="http://anykey.co.il/deeplinks/feature.png" />
    <meta property="fb:app_id" content="241841163195870" />
  <STYLE TYPE="text/css">
    body{font-family:Verdana,Geneva,sans-serif;font-size:16px;line-height:1.4em;color:#333;background-color:White;}
  </STYLE>
</HEAD>

Answer 4

您将事件侦听器添加到表单，但是在其中您不提交表单，而是将另一个事件侦听器添加到请求的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事件的事件处理程序以处理响应，此后实际上还发送了请求，因此，当您收到响应时，请放心地触发事件处理程序，并运行处理该响应的代码。响应。

Answer 5

这应该是您在前端中寻找的东西。

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);
    }
  }
 };
});

带有POST方法的AJAX请求不起作用

5 个答案: