Question

我正在尝试从站点向服务器发送包含用户输入数据的发布请求。我收到TypeError：此处无法读取未定义的属性“车辆”作为响应。

HTML和脚本数据：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Car Finder</title>
        <link rel="stylesheet" href="style.css">
        <center><h1>Craigslist Vehicle Finder</h1></center>
    </head>
    <body>
        <form class="form">
            <input type="text" name="vehicle" value="" id="vehicle">
            <label for="vehicle">Vehicle</label>
        </form>
        <form class="form">
            <input type="text" name="miles" value="" id="miles">
            <label for="miles">Miles</label>
        </form>
        <label class="container">
            <input type="checkbox" id="checkbox">
            <span class="checkmark"></span>
            <label for="checkbox">Manual</label>
        </label>   
        <select id="select" class="City">
            <option value="null">Select Location</option>
        </select>
        </div>
        <form class="submit Search">
            <input type="submit" value="Search Craigslist"><br/>
        </form>
        <script>
            var select = document.getElementById("select"),
                    arr = ["atlanta","austin","boston","chicago","dallas","denver","detroit","houston","lasvegas","losangeles","miami","minneapolis","newyork","newhaven","orangecounty","philadelphia","phoenix","portland","raleigh","sacramento","san diego","seattle","sfbay","washingtondc"];

                for(var i = 0; i < arr.length; i++) {
                    var option = document.createElement ("OPTION"),
                        txt = document.createTextNode(arr[i]);
                    option.appendChild(txt);
                    select.insertBefore(option, select.lastChild);
                }
        </script>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
        <script>
            $.post('http://localhost:3000', { vehicle: 'input#vehicle', miles: 'input#miles', location: 'select' }, function (err, result) {
                if (err) {
                    console.log(err);
                } else {
                    return data;
                }
            });
        </script>
    </body>
</html>

用于接收POST数据的服务器端方法：

app.post('/', (req, res, err) => {
    if (req.method == 'POST') {
        console.log(req.body.vehicle)
        console.log(req.body.miles)
        console.log(req.body.location)
    }
})

使用快递服务器btw

Answer 1

有一个名为body-parser的npm模块，它提取表单数据并将其发送到req.body对象。使用此模块，您将能够按名称访问表单元素，在这种情况下，可以在路由处理程序中使用req.body.vehicle来解决问题。可能值得检查一下文档：

https://www.npmjs.com/package/body-parser

编辑：因此，我尝试使用body-parser进行了尝试，并获得了req.body在路由处理程序中打印出表单内容。希望这会有所帮助：）

app.js（快速代码）

var express = require('express');
var bodyParser = require('body-parser');

var app = express();

app.use(express.static(__dirname));
var urlencodedParser = bodyParser.urlencoded({ extended: false });

app.get('/', function(req, res) {
    res.sendFile('index.html');
});

app.post('/findvehicle', urlencodedParser, function (req, res, err) {

        console.log(req.body.vehicle);
        console.log(req.body.miles);
        console.log(req.body.location);
        res.redirect('index.html');
});

app.listen("2000");

index.html

<form class="form" method="post" action="/findvehicle" >
        <input type="text" name="vehicle" value="" id="vehicle">
        <label for="vehicle">Vehicle</label>
        <input type="text" name="miles" value="" id="miles">
        <label for="miles">Miles</label>
        <input type="checkbox" name="location" id="option1" value="Atlanta" autocomplete="off" checked=""> Atlanta
        <input type="checkbox" name="location" id="option2" value="Austin" autocomplete="off"> Austin
        <label for="miles">Location</label>
        <input type="submit" value="Search Craigslist"><br/>
</form>

TypeError：无法读取未定义jQuery的属性“ xxx”

1 个答案: