首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何将html表单中的值导入ajax

如何将html表单中的值导入ajax
EN

Stack Overflow用户
提问于 2019-05-10 03:09:47
回答 4查看 76关注 0票数 0

我正在用django做一个项目,这是一个汽车租赁/销售web应用程序,搜索查询可以工作,但当我试图在ajax中提交表单时,它似乎从未进入ajax。

代码语言:javascript
复制
<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代码:

代码语言:javascript
复制
$(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中,但当我单击search时,它显示未定义。我打印了searchText,但我没有打印任何东西,它似乎永远不会到达ajax,是我的表单有问题还是我在ajax中调用不正确?显示的错误是

代码语言:javascript
复制
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
search_car.js:25 Internal Server Error
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2019-05-10 03:13:15

$('#search-form')没有任何值,因为它是一个表单。你需要<input />的值。如果你需要发送整个表单的数据,你需要使用:

代码语言:javascript
复制
data: $('#search-form').serialize(),

在您的AJAX调用中,请这样更改:

代码语言:javascript
复制
$(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属性,并且它在后端也是匹配的。

票数 0
EN

Stack Overflow用户

发布于 2019-05-10 03:14:53

我认为这个代码的错误之处在于,你应该通过它们自己的选择器来获取每个字段的值,而不能仅仅通过表单选择器从var searchText = $('#search-form').val();中获取所有值。尝试通过控制台记录searchText,看看它是否真的有任何值

票数 0
EN

Stack Overflow用户

发布于 2019-05-10 03:25:22

您正在使用访问表单值。Val()函数。这是不正确的,因为表单包含多个子元素,它不会返回值。如果你必须访问搜索文本,那么它必须是一个像$('#from-place').val()这样的输入控件。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56066112

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档