Я склоняюсь AJAX и сталкиваюсь с особой проблемой с методом POST. Скорее я не знаю, что с этим делать. Мой сервер находится на узле + Express.
Случай 1: Моя форма отправлена через AJAX, и сервер отвечает res.render ('ContactUs', {data : req.body.customerEmail}).
Результат: На вкладке сети chrome я вижу вызов POST с типом XHR. Данные формы размещены правильно. Ответ получен, но страница не отображается. Согласно стековому посту ( Разница между jquery постом и html бланком поста ), именно так AJAX и ведет себя.
Случай 2: Моя форма отправлена через AJAX, и сервер отвечает res.redirect ('/ Ack').
Результат: на вкладке сети chrome я вижу вызов POST с введите XHR ( Ref1 ). Данные формы размещены правильно. Перенаправление получено, в этот момент chrome меняет тип POST с xhr на text / plain, а состояние на 302. Перенаправление запускается, т.е. вызывается метод GET с типом xhr, и страница не перенаправляет, хотя требуемый страница перенаправления получена в ответе. ( Ref2 )
Я совершенно не понимаю, что происходит в случае 2. Почему POST меняется с xhr на text / plain? и почему GET go пересекается как XHR? Перенаправление не является успешным, потому что нет AJAX для обработки GET, который проходит как XHR?
Я посмотрел на следующие сообщения о переполнении стека, которые казались похожими на мои, но я не думаю, что у меня есть какие-либо проблемы с CORS, или я? : /
Chrome отменяет CORS XHR при перенаправлении HTTP 302
Какое правильное поведение ожидается при перенаправлении HTTP POST => 302 в GET?
Chrome отменяет CORS XHR при перенаправлении
Я занимался этим около трех дней, и теперь я потерян. Может кто-нибудь помочь и пролить свет на это?
Я отправил свой код для справки.
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("Hello");
$('form').on('submit', function(){
var inputData = $('form input');
var dataToPost = {customerEmail:inputData.val()};
alert(dataToPost.customerEmail);
$.ajax({
type:'POST',
url:'/Contact',
data: dataToPost,
success: function(){}
});
return false;
});
});
</script>
</head>
<body>
<h4>Contact Us Form</h4>
<form class="" action="/Contact" method="post">
<label for="customerEmail">Customer Email</label>
<input type="text" name="customerEmail" value="">
<button type="submit" name="button">Submit</button>
</form>
<div class="">
<h4>Thanks for getting in touch. We will reply to you shortly at <%= data %></h4>
</div>
</body>
<!-- <script src="./TestController.js"></script> -->
</html>
Узел
var express = require('express');
var bodyparser = require('body-parser');
var app = express();
var urlencoded = bodyparser.urlencoded({extended:false});
app.set("view engine", 'EJS');
app.use(express.static('./'));
app.get('/Contact', function(req, res){
res.render('ContactUs', {data:""});
});
app.post('/Contact', urlencoded, function(req, res){
console.log(req.body.customerEmail);
//res.render('ContactUs', {data:req.body.customerEmail});
res.redirect('/Ack');
});
app.get('/Ack', function(req, res){
res.render("Ack");
});
app.listen(8080);
console.log('You are now listening on port 8080...');