表单验证和 HTML 修改答案

【问题标题】：Form validation and HTML modification表单验证和 HTML 修改
【发布时间】：2018-02-11 06:23:03
【问题描述】：

说明：

我正在尝试在服务器端验证 <form>。为此，我使用 AJAX 将 JSON 格式的表单输入发送到后端（一个 express.js 应用程序）。验证后，我向前端发送另一个具有这种结构的 JSON：

{
     input1: true|false,
     ...
     inputN: true|false
}

（true 正确，false 错误）

现在，在前端，如果一个输入错误，则在 <input> 旁边添加一个 <span>，表示它不正确。如果它是正确的发生相同但表明<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 似乎有效，但我不明白如何以及为什么有效。

jsonpCallback function not working

【问题讨论】：

提示，请不要在头部添加js script，始终在end 内部的body tag。
哦，好的。我在<body> 看到了很多次，但为什么呢？为什么最后？我记得在<script> 里面你可以添加一个async 标签来异步加载代码。对吗？
当您的代码被解析（在页面加载时）时，data: $('#myForm').serializeArray() 找不到 #myForm，因为该元素尚不存在。这就是为什么将它放在页面末尾的想法。另一种方法是使用$(document).ready(function(){ 和}); 包装您的代码，以便在加载所有DOM 元素时解析代码。
我尝试放在最后，但问题仍然存在
不起作用。我认为问题出在后端，使用 expressjs 模块

标签： jquery html node.js ajax express

【解决方案1】：

将此添加到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();
});

https://enable-cors.org/server_expressjs.html

Ajax post response from express js keeps throwing error

【讨论】：