Ошибка типа: невозможно прочитать свойство 'xxx' неопределенного jQuery - PullRequest
Новая
       1

Ошибка типа: невозможно прочитать свойство 'xxx' неопределенного jQuery

0 голосов
/ 30 августа 2018

Я пытаюсь отправить запрос на публикацию с сайта на сервер, который содержит данные, введенные пользователем. Я получаю TypeError: Не могу прочитать свойство 'vehicle' из неопределенного как ответ здесь.

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)
    }
})

с использованием экспресс-сервера

1 Ответ

0 голосов
/ 31 августа 2018

Существует модуль npm, называемый body-parser, который извлекает данные формы и отправляет эти данные в объект 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...