Как получить значения из HTML-формы в AJAX

Question

Я делаю проект в django, который является веб-приложением по аренде / продаже автомобилей, поисковый запрос работает, но когда я пытаюсь отправить свою форму в ajax, кажется, что она никогда не достигает ajax.

<div class="container">
    <div class="card-header bg-info text-white">
        <h4>
            <i class="fas fa-car"></i> Search Car </h4>
    </div>
    <form method="get" id="search-form">
        <div class="input-field">
            <label for="from">Number:</label>
            <input type="number" class="form-control" id="from-place" placeholder="Any" name="number" />
        </div>
        <section>
            <label for="class">Car Type:</label>
            <select class="cs-select cs-skin-border input-half">
                <option value="" disabled selected>Any</option>
                <option value="1">Sedan</option>
                <option value="2">Saloon</option>
            </select>
        </section>
        <section>
            <label for="class">Price:</label>
            <div class="wide">
                <select class="cs-select cs-select-half cs-skin-border input-half" name="price">
                    <option value="" disabled selected>any</option>
                    <option value="1000">1.000</option>
                    <option value="2000">2.000</option>
                    <option value="3000">3.000</option>
            </div>
        </section>
        <div class="col-xxs-12 col-xs-12 text-center">
            <input type="hidden" name="search_filter" value="true">
            <input type="submit" id="search-apa" value="Search">
        </div>
    </form>
</div>

и этот код ajax:

$(document).ready(function() {
    $('#search-form').on('submit', function(e) {
        e.preventDefault();
        var searchText = $('#search-form').val();
        $.ajax({
            url: '/cars/search_car/?search_filter=' + searchText,
                type: 'GET',
                success: function(resp) {
                var newHtml = resp.data.map(d => {
                    return `<div class="cars">
                        <a href="/cars/${d.id}">
                        <h4>${d.type}</h4>
                        <p>${d.price}</p>
                    </a>
                    </div>`
                });
                $('.cars-index').html(newHtml.join(''));
                $('.search-form').val( '');
            },
            error: function(xhr, ststus, error) {
                console.log(error);
            }
        })

    });
});

Я пытаюсь получить значения из формы в ajax, но когда я нажимаю кнопку поиска, появляется сообщение undefined. Я напечатал searchText, и я ничего не печатаю, кажется, что он никогда не достигает ajax, что-то не так с моей формой, или я не правильно звоню в ajax? Ошибка, которая показывает:

Failed to load resource: the server responded with a status of 500 (Internal Server Error)
search_car.js:25 Internal Server Error

Answer 1

Строка

var searchText = $('#search-form').val();

присваивает searchText пустое строковое значение.То, что вы хотите:

let formString = $("#search-form").serialize();

Answer 2

Я думаю, что не так с кодом, это var searchText = $('#search-form').val(); Вы должны получить значение каждого поля с помощью их собственного селектора, вы не можете просто получить все значения из формы с помощью селектора формы.Попробуйте войти в консоль searchText и посмотреть, имеет ли оно значение

Answer 3

Вы получаете доступ к значению формы с помощью. Val () функция. Что неверно, поскольку форма содержит несколько дочерних элементов, она не вернет вам значение. Если вам нужен доступ к поисковому тексту, то это должен быть элемент управления вводом, такой как $ ('# from-place'). Val ().

Answer 4

$('#search-form') не имеет никакого значения, потому что это форма. Вам нужно значение <input />. Если вам нужно отправить данные всей формы, вы должны использовать:

data: $('#search-form').serialize(),

При вызове AJAX измените это следующим образом:

$(document).ready(function() {
    $('#search-form').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            url: '/cars/search_car/?search_filter=' + searchText,
                type: 'GET',
                data: $('#search-form').serialize(),
                success: function(resp) {
                var newHtml = resp.data.map(d => {
                    return `<div class="cars">
                        <a href="/cars/${d.id}">
                        <h4>${d.type}</h4>
                        <p>${d.price}</p>
                    </a>
                    </div>`
                });
                $('.cars-index').html(newHtml.join(''));
                $('.search-form').val( '');
            },
            error: function(xhr, ststus, error) {
                console.log(error);
            }
        })

    });
});

И убедитесь, что у вас есть атрибут name для всего, и он совпадает и в бэкэнде.