AJAX-запрос с методом POST не работает - PullRequest
Новая
       8

AJAX-запрос с методом POST не работает

0 голосов
/ 29 августа 2018

Итак, это приложение To-do, которое работает, записывая элемент в поле ввода и сохраняя его array объекта, а затем используя EJS для отображения данных.

Я использовал AJAX запрос (используя XHR) к URL и прочему, но кажется, что он вообще не работает, на самом деле я провел несколько тестов и похоже, что вся функция события submit не ' Это не сработало, но даже тогда я попытался использовать JSON.stringify и JSON.parse, но это дало мне ошибку, равную "an expected token 0 at position 0"

Что не так? Я использую Express.js для рендеринга сервера, EJS в качестве механизма просмотра и Javascript для отправки запросов.

Настройка сервера (отдельный модуль, позже приложение будет модулем 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>

Файл Javascript для отправки запросов AJAX: 

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 в массив, страница продолжает загружаться и загружаться, когда я нажимаю кнопку отправки, и ничего не отображается в разделе Network инструментов Dev. Кажется, это не работает вообще. Черт, даже console.log из "Yaay succeeded" не отображается, что означает, что оно как-то связано с этой функцией, но я просто не могу понять это.

Также, когда я делаю console.log(req.body), он показывает пустой объект, что снова означает, что проблема в этой функции, похоже, что он не отправляет данные или что-то еще. Любая помощь?

Ответы [ 5 ]

0 голосов
/ 29 августа 2018

Это должно быть то, что вы ищете на веб-интерфейсе. 

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);
    }
  }
 };
});
0 голосов
/ 29 августа 2018

Вы добавляете прослушиватель событий в форму, но внутри этого вы не отправляете форму, а добавляете другого прослушивателя событий в событие onreadystatechange запроса. Тогда попробуйте send() внутри этого. Поскольку состояние запроса не изменится только само по себе, наш метод send() никогда не будет запущен. Я думаю, что вы хотели сделать что-то вроде этого: 

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

Это определяет обработчик события для события onreadystatechange, чтобы обработать ответ, и после этого фактически отправляет запрос также, так что при наличии ответа ваш обработчик события сработает и запустит код, который обрабатывает ответ.

0 голосов
/ 29 августа 2018

Ваша проблема в этой строке HTML: 

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

Измените отправку с помощью onclick: 

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

Из MDM : событие отправки запускается при отправке формы.

Обратите внимание, что submit запускается только для элемента формы, а не для кнопки или ввода ввода. (Формы представлены, а не кнопки.)

Другим решением может быть: change type = "submit" с type = "button"

0 голосов
/ 29 августа 2018

Вы не завершаете запрос, когда отправляете POST в '/ todo'; Серверу нечего сообщить клиенту, что запрос выполнен, поэтому веб-страница вращается вечно.

Отправьте HTTP-код состояния «OK» или «Нет ответа» (204), когда действие будет выполнено следующим образом 

app.post("/todo", urlencoded, function(req, res) {
  items.push(req.body);
  res.sendStatus(200);
});
0 голосов
/ 29 августа 2018

Вы должны запретить отправке формы: 

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

дополнительная информация здесь - https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...