Node.js – 将数据发送到Node.js,并以HTML格式validation插入的数据

我有一个简单的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"); 

我有两个问题。

  1. 我是否正确地将提取的数据从表单发送到服务器? 我可以看到控制台中的值,但网页不断加载。 我只是想发送数据,显示和提醒,并留在同一个页面与表格字段清理。
  2. 我应该在将数据发送到服务器之前还是之后validation数据(以及如何)? 例如,确保在字段名称中没有插入数字,或者字段名称长度小于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. 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.

提前致谢 !

       

网上收集的解决方案 "Node.js – 将数据发送到Node.js,并以HTML格式validation插入的数据"

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

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

至于validation,通常你会想validation客户端和服务器端的值。 如果你想坚持快递,你可以使用这样的东西,或者在这里或这里看到一个双重解决scheme。

更新ajax的东西:

你的代码有一些错误。

1)“成功”的错字(你input'成功')

2)你调用sendFormData()函数的方式,你同时发送一个sendFormData()请求并提交表单。 要么拦截表单提交,要么将<input type="submit"更改为<input type="button" (所以不会触发表单提交)

至于错误,你只能发送一个Ajax到最初服务页面的服务器(没有额外的努力)。 这被称为“ 同源政策 ”。

在你的情况下,它看起来像直接从磁盘使用“文件”协议打开页面(浏览器中的URL以file://开头)。 你需要有一个真正的服务器提供你的html,然后设置'相同的内容来源'头,或回发到同一服务器上的path(没有http://blabla...部分)。

要做到这一点,最简单的方法是:

1)让节点提供你的静态内容(在这种情况下是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/