jquery - 在 Express/node/jQuery 中从 POST 中提取表单值时遇到问题
问题描述
我想从表单中获取值并将它们传递给 SQL 查询。这是针对我正在尝试构建的简单 CRUD API 的,我知道这段代码有很多问题。现在,我关注的是为什么 post 路由没有将请求正文从头部 script 标签中的 post 请求记录到控制台。页面出现,但是当我单击提交时没有任何反应。
const pg = require('pg');
const http = require('http');
const express = require('express');
const bodyParser = require('body-parser');
const $ = require('jquery');
const connectionString = process.env.DATABASE_URL ||
'postgres://localhost:5432/hiking';
const server = http.createServer((req,res) => {
res.end(`
<!doctype html>
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
var firstName
,lastName
,mountainName;
$("#submit").click(function(){
firstName=$("#firstName").val();
lastName=$("#lastName").val();
mountainName=$("#mountainName").val();
$.post("http://localhost:3000/inputs", {firstName: firstName, lastName: lastName, mountainName: mountainName}, function(data){
console.log(data);
})
});
}));
</script>
</head>
<body>
First ame: <input type="text" id="firstName" /><br />
Last Name: <input type="text" id="lastName" /><br />
Mountain Peak Name: <input type="text" id="mountainName" /><br />
<input type="file" id="file" /><br />
<button>Save</button><br /><br /><br />
<input id="submit" type="submit" value="Submit"/>
</body>
</html>
`);
});
var app = express()
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json())
app.get('/', function(req, res, next) {
res.sendfile('index.html');
});
app.post('/inputs', function(req,res){
var firstName = req.body.firstName;
var lastName = req.body.lastName;
var mountainName = req.body.mountainName;
console.log(req.body);
});
const client = new pg.Client(connectionString);
client.connect();
const query = client.query('SELECT * from public.hike LIMIT 1', (err, res) => {
if (err){
console.log(err.stack)
} else
console.log(res.rows)
}) ;
console.log("Ready.");
server.listen(3000);
解决方案
我的 HTML 模板中缺少 jQuery 导入。将此行添加到 head 标签中修复了它。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
推荐阅读
- java - 是否可以使用任何算法将 10 位数字加密为 4 位数字?
- android-studio - 如何使用 WebView 制作没有滞后的 android 应用程序?
- python - 更改 Seaborn 热图中缺失值的颜色
- concurrency - DynamoDB 原子更新计数器
- c# - 如何将变量用作另一个类的方法的参数?
- javascript - 如何从中心在图像上方画一条垂直线?
- visual-studio-2017 - 从命令行卸载 Visual Studio 2017 安装程序
- php - diffInHours 函数返回零 - 碳
- java - 如何在vertica sql中生成1000万条随机字母数字记录?
- asp.net - 通过我的 vip 算法加密和解密 web.config 中的 ConnectionSting