在Express/node/jQuery中从POST中提取表单值时遇到问题_Jquery_Node.js_Express_Post

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

jquery node.js express post

在Express/node/jQuery中从POST中提取表单值时遇到问题,jquery,node.js,express,post,Jquery,Node.js,Express,Post,我想从表单中获取值并将其传递给SQL查询。这是我试图构建的一个简单的CRUDAPI，我知道这段代码有很多错误。现在，我的重点是为什么post路由没有将请求主体从头部脚本标记中的post请求记录到控制台。页面出现，但单击“提交”时什么也没发生 const pg = require('pg'); const http = require('http'); const express = require('express'); const bodyParser = require('body-pars

我想从表单中获取值并将其传递给SQL查询。这是我试图构建的一个简单的CRUDAPI，我知道这段代码有很多错误。现在，我的重点是为什么post路由没有将请求主体从头部脚本标记中的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是动态添加的，所以在使用该元素执行某些事件时，需要引用静态元素。为此，您必须使用创建委托绑定

当HTML文档加载到web浏览器中时，它将成为文档对象。文档对象是HTML文档的根节点。因此，您需要使用document对象

$(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);
        })
    });
});

我的HTML模板中缺少jQuery导入。将这一行添加到head标记中可以修复它

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

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