Данные формы публикуются дважды через XMLHttpRequest, один раз как пустой объект и один раз с правильными данными - PullRequest
Новая
       2

Данные формы публикуются дважды через XMLHttpRequest, один раз как пустой объект и один раз с правильными данными

0 голосов
/ 05 марта 2020

Я учусь веб-разработке, и в этом AJAX. Для этого конкретного примера я использую объект XMLHttpRequest в браузере и узел с Express в качестве моего сервера. У меня есть простая форма HTML, которая должна отправлять данные на сервер Node. Я знаю, что данные успешно публикуются, потому что я вижу данные формы на вкладке chrome Network.

У меня есть пара проблем с моим кодом, и я искал ответы на Stackoverflow, а также просмотрел документацию по MDN за последние три дня, но не могу понять это.

Ниже приведены вопросы относительно размещенного кода:

  1. If submitForm ( ) возвращает true, у меня есть данные, отправленные дважды на сервер, один раз с пустым телом запроса и один раз с ожидаемыми данными. Почему? Публиковать данные, когда submitForm () возвращает true
  2. Если submitForm () возвращает false, данные не отправляются обратно на сервер. Почему? Публикация данных, когда submitForm () возвращает false
  3. Если вообще нет вызова submitForm () (ie. Без вызова XHR), то данные формы отправляются правильно и это видно в req.body на стороне сервера. Результат POST, когда к форме не прикреплено событие onSubmit
  4. Если я установлю RequestHeader на xhr в application / x- www-form-urlencoded, , это Я получаю.
  5. Как получить форму для отправки данных на сервер с помощью XMLHTTPRequest?

Я полностью потерян и не уверен, что мне не хватает. Если кто-то может пролить немного света, я был бы очень признателен. 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"/>

<script>
"use strict";
function submitForm()
{
  var formElement = document.getElementById("myForm");
  var formData = new FormData(formElement);

  var xhr = new XMLHttpRequest();
  xhr.open("POST", "/Test", true);
  xhr.send(formData);
  //return false;
}
</script>
</head>

<body>
<form id="myForm" method="POST" action="/Test" onsubmit="return submitForm();" >
   <input type="text" value="John" name="name"/>
   <input type="submit" value="Send Data"/>
</form>
</body>
</html>

//Server side code (NodeJS)
var express = require('express');
var bodyparser = require('body-parser');

var app = express();
app.use(express.static('./'));

var urlencoded = bodyparser.urlencoded({extended:true});

app.get('/Test', function(req, res){
    res.sendFile(__dirname+'/Test.html');
});

app.post('/Test', urlencoded, function(req, res){
  console.log("In POST");
  console.log(req.body);
  res.sendFile(__dirname+'/Test.html');
});

app.listen(8080);
console.log('Now listening on port 8080...');

1 Ответ

0 голосов
/ 06 марта 2020

после просмотра вашего кода и его тестирования самостоятельно. Я узнал, что ...

  1. Чтобы ответить на первый вопрос, вы фактически отправляете данные «Джон» дважды. Первый раз был через вашу функцию submitForm (). Второй раз был через атрибуты элемента method = "POST", action = "/ Test".

  2. Функция submitForm действительно работает, но вы используете XMLHttpRequest () для отправки запроса на публикацию на сервер. Если вы читаете документацию, XMLHttpRequest использует многосоставный / form-data enctype для отправки данных формы. Следовательно, ваш маршрут должен быть в состоянии обрабатывать данные multipart / form-data.

  3. Чтобы узнать, действительно ли вызывается функция submitForm (), вы всегда можете добавить предупреждение ('в Функция. Если она вызывается, появится подсказка. Всегда отличный способ отладки!

  4. Формат, отправленный XMLHttpRequest (): multipart / form-data, формат обработан: urlencoded, немного несоответствия здесь

  5. Наконец, давайте вернемся к решению. Как я уже говорил, ваш маршрут должен иметь возможность обрабатывать данные multipart / form.

var express = require ('express'); // Я понятия не имею, почему я не смог отформатировать эту строку в коде: / 

var bodyparser = require('body-parser');
var multer = require('multer') // Use this module to add a middleware onto your route
var mult_handler = multer() // creates a handler object

var app = express();
app.use(express.static('./'));

var urlencoded = bodyparser.urlencoded({extended:true});

app.get('/Test', function(req, res){
    res.sendFile(__dirname+'/Test.html');
});

app.post('/Test', mult_handler.none(), function(req, res){ 
    console.log("In POST");
    console.log(req.body);
    res.sendFile(__dirname+'/Test.html');
});

app.listen(8080);
console.log('Now listening on port 8080...');
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...