发送表单数据到节点服务器
我正试图发送一些表单数据到一个端点。
这是我的客户端代码：
<form name="form" action="http://localhost:8080/geodata" method="post"> <label for="minlat"> MinLat: </label> <input type="text" name="MinLat" value="0"><br> <label for="maxlat"> MaxLat: </label> <input type="text" name="MaxLat" value="1"><br> <label for="minlong"> MinLong: </label> <input type="text" name="MinLong" value="0"><br> <label for="maxlong"> MaxLong: </label> <input type="text" name="MaxLong" value="1"><br> <button type="submit" class="btn btn-success"> Submit <span class="fa fa-arrow-right"></span></button> </form> <script> $(document).ready(function() { $("#form") .submit(function(event) { var formData = { 'minLat' : $('input[name=MinLat]').val(), 'maxLat' : $('input[name=MaxLat]').val(), 'minLong' : $('input[name=MinLong]').val(), 'maxLong' : $('input[name=MaxLong]').val() }; $.ajax({ url: $form.attr('action'), data: formData, cache: false, dataType: 'json', processData: false, type: 'POST', }).done(function(data) { console.log(data); }); event.preventDefault(); }); }); </script> 我在服务器端代码（express.js）上有一个入口：
var express = require("express"); var path = require("path"); var bodyParser = require("body-parser"); var app = express(); app.use(express.static(__dirname + "/public")); app.use(bodyParser.json()); // Initialize the app. var server = app.listen(process.env.PORT || 8080, function () { var port = server.address().port; console.log("App now running on port", port); }); app.post("/geodata", function(req, res) { console.log(req.body); res.send("hi"); });
我希望将这个表单数据发送到端点/地理数据，并使用该数据将结果发送回客户端。 首先，当我点击提交时，我的terminal（这是服务器端request.body）中得到一个空的{}。 我期待这个request.body中的表单值，但没有收到它们。 我如何确保我的表单值正在发送？
其次，res.send（“hi”）将我的初始页面重新定向到一个新页面，并在那里打印“hi”。 由于我做了一个Ajax调用，不应该只是logging响应，并且网页停留在初始页面上？
将表单操作更改为“/ geodata”（端点）
你也不需要做一个Ajax请求，因为如果一个标签（）被按下/点击，HTML5表单将自己执行请求。
点击首脑会议后，您的页面将成为从“/ geodata”路线发回的响应，req.body将返回一个代表表单数据的对象
dataType：'json'表示你正在等待来自服务器的json数据。 删除dataType，并添加它
data : JSON.stringify(formData), contentType: 'application/json',
contentType将是您发送到服务器的数据的types。