我有一个简单的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");
我有两个问题。
更新:我使用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之类的东西,也可以使用here或here作为双重解决方案。
更新有关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/