Node.js - 将数据发送到 Node.js 并以 HTML 形式验证插入的数据答案

【问题标题】：Node.js - Send data to Node.js and validate inserted data in HTML formNode.js - 将数据发送到 Node.js 并以 HTML 形式验证插入的数据
【发布时间】：2015-04-01 20:36:43
【问题描述】：

我有一个简单的 HTML 表单

index.html

<!DOCTYPE html>
<html>

    <head>
        <title>My Title</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script>
        function sendFormData(){
            var formData = JSON.stringify($("#myForm").serializeArray());

            $.ajax({
                type: "POST",
                url:"http://localhost:3000/test",
                data: formData,
                sucess: function(){
                    alert("something!");
                },
                error: function(textstatus, errorThrown) {
                    alert('text status ' + textstatus + ', err ' + errorThrown);
                }
            });
        } 
        </script>
    </head>

    <body> 
        <form id="myForm">
            Name: <input type="text" name="name">
            Address: <input type="text" name="address">
            <input type="submit" value="Submit" onClick="sendFormData()">
        </form>
    </body>
</html>

我正在使用 Node.js 将数据发送到服务器

server.js

// Dependencies
var express = require('express');
var bodyParser = require('body-parser');

// Express
var app = express();
app.use(bodyParser.urlencoded({ extended: true}));
app.use(bodyParser.json());

// Get information submitted
app.post('/test', function(req, res) {
    console.log("Information received !");
    console.log(req.body);
    res.send("Ok!");
});

// Start server
app.listen(3000);
console.log("API is running on port 3000");

我有两个问题。

我是否正确地将提取的数据从表单发送到服务器？我可以在控制台中看到值，但网页一直在加载。我只是想发送数据、显示和提醒，并在清理表单字段的情况下留在同一页面。
我应该在将数据发送到服务器之前还是之后验证表单中的数据（以及如何验证）？例如，确保字段名称中没有插入数字，或者字段名称的长度应少于 30 个字符。

更新：我使用 Ajax 而不是我最初的方法将数据发送到服务器。我能够在控制台中看到使用 ajax 发送的信息，但 ajax 成功处理程序不会触发。我收到此错误XMLHttpRequest cannot load http://localhost:3000/test. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

提前致谢！

【问题讨论】：

标签： javascript node.js

【解决方案1】：

浏览器正在等待服务器的响应。试试：

app.post('/formdata', function(req, res) {
    console.log("You sent the name " + req.body.name + " and the address " + req.body.address);
    res.send("ok");
});

至于验证，通常您希望验证客户端和服务器端的值。如果您想坚持使用 express，可以使用 this 之类的东西，或者查看 here 或 here 以获得双重解决方案。

ajax 的更新：

您的代码中有一些错误。

1) “成功”钩子中的错字（您输入了“成功”）

2) 你调用sendFormData() 函数的方式，你同时发送ajax 请求和提交表单。要么拦截表单提交，要么把<input type="submit"改成<input type="button"（这样就不会触发表单提交）

至于错误，您只能将 ajax 发送到最初为该页面提供服务的同一服务器（无需额外的努力）。这称为“same origin policy”。

在您的情况下，您似乎正在使用“文件”协议直接从磁盘打开页面（浏览器中的 URL 以 file:// 开头）。您需要有一个真正的服务器为您的 html 提供服务，然后设置“相同的内容来源”标头，或者回发到同一服务器上的路径（没有 http://blabla... 部分）。

要使其正常工作，您可以做的最简单的事情是：

1) 让节点为您的静态内容提供服务（本例中为 index.html）

app.use(bodyParser.json());
app.use(express.static('public'));

2) 将 index.html 移动到“public”目录，这样你的文件结构是：

- sever.js
- [public]
    |- index.html

3) 从您的请求中删除硬编码的网址

$.ajax({
    type: "POST",
    url:"/test",
    data: formData,
    //...
});

4) 在浏览器中打开http://localhost:3000/

【讨论】：

通过使用 "res.send("ok") 我最终进入了不同的页面。无限加载停止但我想留在同一页面上。有可能吗？
一旦您发布表单，您就已经离开了该页面。作为回报，您只能呈现一个新页面。要留在同一页面上，请考虑使用 ajax 而不是发布表单。
那么，不是使用method 和action 的形式，而是建议使用onClick 处理程序来创建和ajax 请求？那我该如何处理这些信息呢？我今天开始使用 Node.js，但事情仍然有点混乱 :)
这纯粹是浏览器问题。您的 node.js 代码将保持不变。在这里查看如何通过 AJAX 发送表单而不是发布它：stackoverflow.com/questions/1960240/jquery-ajax-submit-form（是的，肯定将 jQuery 添加到您的前端）
我想我开始让事情变得不那么混乱了 :) 请检查我的更新。我能够使用 ajax 将数据发送到服务器，打印它但 ajax 成功处理程序不会触发。相反，我得到一个错误。