如何将html表单中的值导入ajax
如何将html表单中的值导入ajax
提问于 2019-05-10 03:09:47
我正在用django做一个项目，这是一个汽车租赁/销售web应用程序，搜索查询可以工作，但当我试图在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中，但当我单击search时，它显示未定义。我打印了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回答 4
Stack Overflow用户
回答已采纳
发布于 2019-05-10 03:13:15
$('#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属性，并且它在后端也是匹配的。
Stack Overflow用户
发布于 2019-05-10 03:14:53
我认为这个代码的错误之处在于，你应该通过它们自己的选择器来获取每个字段的值，而不能仅仅通过表单选择器从var searchText = $('#search-form').val();中获取所有值。尝试通过控制台记录searchText，看看它是否真的有任何值
Stack Overflow用户
发布于 2019-05-10 03:25:22
您正在使用访问表单值。Val()函数。这是不正确的，因为表单包含多个子元素，它不会返回值。如果你必须访问搜索文本，那么它必须是一个像$('#from-place').val()这样的输入控件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56066112
复制相关文章
相似问题
腾讯云开发者
