Javascript 单击时使用ajax进行搜索，并在同一页面laravel中显示结果

我已设置了一个包含搜索表单的视图：

<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>

最后是控制器中给出结果的方法：

    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变为

http://localhost:8000/trips/popular/trekking/test?

单击搜索按钮后。inspect元素的Console部分显示脚本中没有错误。我在这里犯了什么错误？

这意味着由于

type=“submit”

1） 更改为

type=“button”

2） 此处的

单击事件

应为

按钮

而不是

div

，因此更改

选择器

并添加

e.preventDefault（）以防止默认提交

$（'btn search'）。在（'click'，'btn search'，function（）{e.preventDefault（）；}）上

注意：

1st：缺少您的
操作属性
，因此表单将提交到同一页

2nd：您的
方法属性
丢失，因此它将采用默认的
GET
方法
您将按钮类型指定为
submit
，或者将其作为

<button type="button" class="btn" id="btn-search" >
    Search
</button>

这意味着您的表单由于type=“submit”而提交到同一页面
    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);
}

 <button type="button" class="btn" id="btn-search" >

<button type="button" class="btn" id="btn-search" >
    Search
</button>

$(document).ready(function() {
$('#dateprice-search').on('click', '#btn-search', function(e) {
    e.preventDefault();
    //your ajax code
  });
});