我已经设置了一个包含搜索表单的视图:
<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');
最后在控制器中给出结果的方法:
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
之前,网址会显示为http://localhost:8000/trips/popular/trekking/test?
。 inspect元素的控制台部分在脚本中没有显示错误。我在这里犯了什么错误?
答案 0 :(得分:2)
这意味着由于submiting
type="submit"
到同一页面
1)更改为type="button"
<button type="button" class="btn" id="btn-search" >
2)此处click event
应该是button
而不是div
,因此请更改selector
并在jquery中添加e.preventDefault();
以防止默认提交。< / p>
$('#btn-search').on('click', '#btn-search', function() { e.preventDefault(); });
注意:
第一次:您的action attribute
遗失,因此表单将提交相同的页面。
第二次:您的method attribute
缺失,因此会采用默认的GET
方法
答案 1 :(得分:0)
您已将按钮类型指定为submit
,或将其删除为
<button type="button" class="btn" id="btn-search" >
Search
</button>
或使用jquery preventDeafult()
函数来阻止提交按钮的默认行为,即在按钮点击事件中提交表单
$(document).ready(function() {
$('#dateprice-search').on('click', '#btn-search', function(e) {
e.preventDefault();
//your ajax code
});
});