Node.js - 将数据发送到 Node.js 并在 HTML 表单中验证插入的数据

Question

Node.js - 将数据发送到 Node.js 并在 HTML 表单中验证插入的数据

3

I have a simple HTML form

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.

提前感谢！

- Let_IT_roll

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- panta82 · Accepted Answer

浏览器正在等待来自您的服务器的响应。请尝试以下操作：

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，则可以使用此工具，或者查看这里或这里获取双重解决方案。

更新ajax问题：

您的代码中有一些错误。

1）'success'钩子中有拼写错误（您输入了'sucess'）

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

至于错误，您只能将ajax发送到最初提供页面的同一服务器上（除非进行某些额外的努力）。这称为“同源策略”。

在您的情况下，看起来您是直接使用“文件”协议从磁盘打开页面（浏览器中的url以file://开头）。您需要让真正的服务器提供html，然后设置“相同内容源”标头，或者将其提交回该同一服务器上的路径（不包括http://blabla...部分）。

让此工作最简单的方法是：

1）让node提供静态内容（在这种情况下为index.html）

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

2) 将index.html移动到“public”目录中，使您的文件结构如下：

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

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

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

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