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，但是当我单击“搜索”时，它说未定义。我打印了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

$('#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属性，并且该属性也在后端匹配。

Answer 2

我认为这段代码出了问题var searchText = $('#search-form').val(); 您应该通过它们自己的选择器获取每个字段的值，而不仅仅是使用表单选择器从表单中获取所有值。尝试在控制台上记录searchText并查看它是否实际上具有任何值

Answer 3

您正在使用来访问表单值。 Val（）函数。哪个不正确由于表单包含多个子元素，因此不会返回任何值。如果必须访问搜索文本，则它必须是一个输入控件，例如$（'＃from-place'）。val（）。

Answer 4

行

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

为searchText分配一个空字符串值。您想要的是：

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

如何从html表单获取值到ajax

4 个答案: