我设置了一个包含搜索表单的 View :
<form>
<input type="hidden" id="product_id" value="{{$tour->id}}">
<div class="form-group col-md-4">
<label>Date:</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right" id="start" placeholder="Start Date">
</div>
</div>
<div class="form-group col-md-4">
<label>End:</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right" id="end" placeholder="End Date">
</div>
</div>
<div class="form-group col-md-4" id="dateprice-search">
<label></label>
<button type="submit" class="btn" id="btn-search" >
Search
</button>
</div>
下面是处理表单请求的ajax代码:
$(document).ready(function() {
$('#dateprice-search').on('click', '#btn-search', function() {
$.ajax({
type: 'post',
url: '/date-price',
data: {
'_token': $('input[name=_token]').val(),
'product_id': $("#product_id").val(),
'start': $("#start").val(),
'end': $("#end").val()
},
success: function(data) {
$('.shadow-z-1').show();
$('.shadow-z-1').append("<tr class='liquid-row><td>" + data.start + "</td><td>"+ data.end + "</td><td>" + data.end + "</td><td><a class='btn-m btn btn-m-success'>Available</a></td></tr>");
}
});
});
});
路线:
Route::post('/date-price','GetPublicController@datePrice')
->name('searchDate');
最后在 Controller 中给出结果的方法:
public function datePrice(Request $request){
$start = $request->start;
$end = $request->end;
$dates = DatePrice::where('tour_id','=',$request->product_id)
->whereBetween('start', array($request->start, $request->end))
->whereBetween('end', array($request->start, $request->end))
->get();
return response()->json($dates);
}
起初,在提交表单 http://localhost:8000/trips/popular/trekking/test
之前,url 看起来像这样,url 变成了 http://localhost:8000/trips/popular/trekking/test?
单击搜索按钮后。检查元素的控制台部分在脚本中没有显示错误。我在这里犯了什么错误?
最佳答案
这意味着您的表单提交
到同一页面由于type="submit"
1) 更改为 type="button"
<button type="button" class="btn" id="btn-search" >
2) 这里的 click 事件
应该是 button
而不是 div
所以改变 selector
并添加 e.preventDefault();
在 jquery 中防止默认提交。
$('#btn-search').on('click', '#btn-search', function() { e.preventDefault(); });
注意:
1st:缺少您的action 属性
,因此表单将提交相同的页面。
2nd:缺少您的method 属性
,因此它将采用默认的GET
方法
关于javascript - 单击时使用 ajax 搜索并在同一页面 laravel 中显示结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44672441/