Javascript 如何将html表单中的值转换为ajax

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

搜索车 编号： 车辆类型： 任何 轿车 轿车 价格： 任何 1 2 3 下面是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);
            }
        })

    });
});

$'search-form'没有任何值，因为它是一个表单。您需要的是用户的值。如果需要发送整个表单的数据，则需要使用：

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属性，并且它在后端也得到匹配。

我认为代码的错误在于var searchText=$'search-form'.val；

---

您应该通过各自的选择器获取每个字段的值，而不能仅使用表单选择器获取表单中的所有值。尝试控制台记录searchText并查看它是否确实有任何值，您正在使用它访问表单值。Val函数。这是不正确的，因为表单包含多个子元素，它不会返回值。如果您必须访问搜索文本，那么它必须是一个输入控件，如$'from-place'.val

线路

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

asigns searchText为空字符串值。你想要的是：

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

---

看起来searchText应该设置为$'[name=search\u filter]'.val或除$'search-form'.val以外的其他值。如果要发送所有表单输入，则应将其设置为第一个建议答案。另外，看起来您的Price select并没有关闭。@mark.hch我尝试了您的searchText版本，当我实际需要这些值时，它会打印为true。汽车id未定义，因此我无法导航到汽车。是的，我实际上没有检查元素类型或嵌入值是否分别为隐藏和真实，我只是看到了名称并猜测我是否发布了答案，而不是我可能花了更多时间阅读的评论-这就是为什么我说了或除$'search-form'.val以外的其他内容。单独发送true当然没有帮助，但是您接受了我引用的答案，就像第一个建议的答案…，所以看起来一切都很好。回头见。仅供参考-OP声明我打印了搜索文本，而我[t]没有打印任何内容-所以你肯定是对的。是的，这就是问题所在，无论你尝试搜索哪个字段，请尝试yourInputName.val。我没有汽车id，所以我无法导航到汽车。@SachihiroTakamori我不明白。您能解释一下吗？这可能与您使用GET方法而不是POST提交表单有关吗？

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