个人中心
gpt4 book ai didi

jquery - 表单验证和 HTML 修改

转载 作者：行者123 更新时间：2023-11-28 00:53:30 25 4
gpt4 key购买 nike

描述:

我正在尝试验证 <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 似乎有效，但我不明白如何以及为什么有效。

jsonpCallback function not working

最佳答案

将此添加到 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

关于jquery - 表单验证和 HTML 修改，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46012897/

25 4 0
文章推荐： javascript - 通过 DOM 创建 html，结果只显示在控制台，而不会显示在网页上
文章推荐： javascript - 如何使用 jQuery 从多个下拉框中获取总计？
文章推荐： css - 使用 CSS Flexbox 构建堆叠布局
文章推荐： html - 从 VBA 代码中请求带有 UTF-8 字符的 URL
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com