搜索與在同一頁面點擊顯示結果laravel

Question

我設置包含搜索表單視圖AJAX：

<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); 
} 

起初的URL看起來像這樣提交表單http://localhost:8000/trips/popular/trekking/test和URL點擊搜索按鈕後變得http://localhost:8000/trips/popular/trekking/test?之前。檢查元素的控制檯部分在腳本中顯示沒有錯誤。我在這裏犯了什麼錯誤？

Answer 1

這意味着你的形式submiting因同一頁面type="submit"

1）改變type="button"

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

2）這裏click event應該是button不div所以更改selector並添加e.preventDefault();在jquery防止默認提交。

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

注：

：你action attribute錯過了那麼表格將被提交相同的頁面。

第二：你method attribute丟失，因此將採取默認GET方法

Answer 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 
    }); 
});