描述:
我正在尝试验证 <form>在服务器端。为此，我使用 AJAX 将 JSON 格式的表单输入发送到后端(一个 express.js 应用程序)。验证后，我向前端发送另一个具有此结构的 JSON:
{
input1: true|false,
...
inputN: true|false
}
(true 是对的，false 是错的)
现在，在前端，如果一个输入是错误的 <span>在 <input> 旁边添加表明这是不正确的。如果它是正确的发生相同但表明 <input>是正确的。
问题出现在后端到前端响应中，AJAX 调用失败以及 IDK 原因。
HTML代码:
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
function submitForm() {
$('span').remove();
let req = $.ajax({
url: 'http:localhost:3000/validate',
dataType: 'json',
data: $('#myForm').serializeArray()
});
req.done((data, textStatus, jqXHR) => {
alert('OK');
for (input in data) {
let elem = '<span style="color: green">OK</span>';
if (!data[input])
elem = '<span style="color: red">ERROR</span>';
$('#${input}').append(elem);
}
});
req.fail((jqXHR, textStatus, errorThrown) => {
alert('ERROR');
});
}
</script>
</head>
<body>
<form id="myForm">
<div id="name">
<input type="text" name="name" placeholder="Name">
</div>
<div id="surname">
<input type="text" name="surname" placeholder="Surname">
</div>
<input type="submit" onclick="submitForm()">
</form>
</body>
</html>
编辑后的 HTML 代码:
<!DOCTYPE html>
<html>
<body>
<form id="myForm">
<div id="name">
<input type="text" name="name" placeholder="Name">
</div>
<div id="surname">
<input type="text" name="surname" placeholder="Surname">
</div>
<input type="button" value="Send" onclick="submitForm()">
</form>
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
function submitForm() {
$('span').remove();
let req = $.ajax({
url: 'http:localhost:3000/validate',
dataType: 'json',
data: $('#myForm').serializeArray()
});
req.done((data, textStatus, jqXHR) => {
alert('OK');
for (input in data) {
let elem = '<span style="color: green">OK</span>';
if (!data[input])
elem = '<span style="color: red">ERROR</span>';
$('#${input}').append(elem);
}
});
req.fail((jqXHR, textStatus, errorThrown) => {
alert('ERROR');
});
}
</script>
</body>
</html>
NodeJS 代码:
const express = require('express');
const app = express();
app.get('/validate', (req, res) => {
let query = req.query;
let obj = {};
obj.name = query.name == 'Marco';
obj.surname = query.surname == 'Canora';
console.log(obj);
res.json(obj);
});
app.listen(3000, () => {
console.log('App is listening');
});
浏览器控制台:
http://localhost:3000/validate?name=Marco&surname=Canora. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
顺便说一句:
使用 jsonpCallback 似乎有效，但我不明白如何以及为什么有效。
最佳答案
将此添加到 app.js 解决问题:
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
关于jquery - 表单验证和 HTML 修改，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46012897/