我有一个简单的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.
    提前致谢 !

    最佳答案

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

    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之类的东西,也可以使用herehere作为双重解决方案。

    更新有关ajax的内容:

    您的代码中有一些错误。

    1)在“成功”钩子(Hook)中键入(您键入“成功”)

    2)调用sendFormData()函数的方式是,您发送ajax请求并同时提交表单。拦截表单提交,或将<input type="submit"更改为<input type="button"(这样就不会触发表单提交)

    对于错误,您只能将ajax发送到最初为该页面提供服务的同一服务器(无需付出额外的努力)。这称为“same origin policy”。

    就您而言,您似乎是使用"file"协议(protocol)直接从磁盘打开页面(浏览器中的URL以file://开头)。您需要有一个真正的服务器来提供您的html,然后设置“相同内容来源” header ,或将其发布回该服务器上的路径(不包括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)从您的请求中删除硬编码的网址
    $.ajax({
        type: "POST",
        url:"/test",
        data: formData,
        //...
    });
    

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

    关于javascript - Node.js-将数据发送到Node.js并以HTML格式验证插入的数据,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29400298/

    10-09 21:10
    查看更多