在 Express/node/jQuery 中从 POST 中提取表单值时遇到问题答案

【问题标题】：Having trouble pulling form values from POST in Express/node/jQuery在 Express/node/jQuery 中从 POST 中提取表单值时遇到问题
【发布时间】：2018-11-29 03:41:10
【问题描述】：

我想从表单中获取值并将它们传递给 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);

【问题讨论】：

标签： jquery node.js express post

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

由于您的 html 是动态添加的，因此您需要在使用该元素执行特定事件时引用静态元素。为此，您必须使用on() 创建一个“委托”绑定。

当 HTML 文档加载到 Web 浏览器中时，它就变成了一个文档对象。文档对象是 HTML 文档的根节点。所以，你需要使用文档对象。

$(document).ready(function () {
    var firstName, lastName, mountainName;
    $(document).on('click', '#submit', function () {
        firstName = $(document).find("#firstName").val();
        lastName = $(document).find("#lastName").val();
        mountainName = $(document).find("#mountainName").val();
        $.post("http://localhost:3000/inputs", {
            firstName: firstName,
            lastName: lastName,
            mountainName: mountainName
        }, function (data) {
            console.log(data);
        })
    });
});

【讨论】：

感谢您的解释。我仍然没有看到任何控制台输出。