搜索与在同一页面点击显示结果laravel

我设置包含搜索表单视图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>

下面是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','[email protected]') 
->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?之前。检查元素的控制台部分在脚本中显示没有错误。我在这里犯了什么错误？

来源

2017-06-21 Tanja Forsberg

这意味着您的表单由于type =“submit”而提交到相同的页面 – JYoThI

这意味着你的形式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方法

来源

2017-06-21 09:45:32 JYoThI

你给按钮类型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 
    }); 
});

来源

2017-06-21 09:49:44

搜索与在同一页面点击显示结果laravel

回答

相关问题