首页 > 解决方案 > 在 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);

标签: jquerynode.jsexpresspost

解决方案


我的 HTML 模板中缺少 jQuery 导入。将此行添加到 head 标签中修复了它。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

推荐阅读