单击时使用 ajax 搜索并在同一页面 laravel 中显示结果答案

【问题标题】：Search with ajax on click and show results in same page laravel单击时使用 ajax 搜索并在同一页面 laravel 中显示结果
【发布时间】：2017-06-21 17:51:32
【问题描述】：

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

<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 之前，url 最初看起来像这样，点击搜索按钮后，url 变为http://localhost:8000/trips/popular/trekking/test?。检查元素的控制台部分在脚本中显示没有错误。我在这里犯了什么错误？

【问题讨论】：

这意味着您的表单由于 type="submit" 而提交到同一页面

标签： javascript php jquery ajax laravel

【解决方案1】：

这意味着由于type="submit"，您的表单submiting 到同一页面

1) 改为type="button"

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

2) 这里click event 应该是button 而不是div 所以更改selector 并在jquery 中添加e.preventDefault(); 以防止默认提交。

$('#btn-search').on('click', '#btn-search', function() { e.preventDefault(); });

注意：

第一个：您的action attribute 丢失，因此表单将提交同一页面。

2nd ：您的method attribute 丢失，因此将采用默认的GET 方法

【讨论】：

【解决方案2】：

您已将按钮类型指定为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
  });
});

【讨论】：