-page负载中的ajax搜索功能

Question

我是拉勒维尔的新手。我使用ajax作为搜索函数。脚本和函数运行良好，但当它显示搜索结果时，它会重新加载整个页面，而不是用div显示。它会重新加载整个页面。

我只给出了要显示的表号，但是它加载了整个页面。为什么会发生这种情况？哪里做错了？有人能找到它并给出这个问题的解决方案吗？

我的页面加载如下：

<script>
  $(document).ready(function(){
  $("button").on('click',function(e){
  e.preventDefault();
   var str=  $("#search").val();
   if(str == "") {
  $( "#tabledata" ).html( data );   
  } else {
  $.get( "{{ url('create?id=') }}"+str, 
  function( data ) {
   $( "#tabledata" ).html( data );   
   });
    }
     });  
      }); 
    </script>

搜索功能：

<div class="panel">
  <br>
    <div>
      <h2 style="font-family:Garamond;color:black;font-weight:bold;margin-left:5%; font-size:40px;"> 
    </div>
    <div class="col-lg-12" >
      <form class="navbar-form navbar-right" method="get">
        <div class="form-group">
          <input type="text"  class="form-control" id="search" placeholder="Search Here.." value="{{ request('search') }}">
        </div>
        <button type="submit" id="search" class="btn btn-default">Submit</button>
      </form>
    </div>

    <div class="container"  style=" max-width: 1150px;" >
      <table class="table table-bordered" style=" margin-top: 60px; font-family:timesnewroman">
        <thead class="text-justify">
        <tbody class="table-striped" id="tabledata">
          <tr class="table-info" style="font-weight:bold;font-size:20px;">
            <th class="text-justify"><strong> Name </strong></th>
            <th class="text-justify"><strong> Email</strong></th>
            <th class="text-justify"><strong> PhoneNumber</strong></th>
            <th class="text-justify"><strong> Action </strong></th>
          </tr>
          @foreach($users as $user)
          <tr class="table-info" style="font-weight: bold ;font-size:15;font-family:timesnewroman;background-color:#f9f9f9">
            <td>{{$user->name}}</td>
            <td>{{$user->email}}</td>
            <td>{{$user->phno}}</td>
            <td>
              <a href="{{ route('show',$user->id) }}">
                <span class="glyphicon glyphicon-eye-open" style=" color:#00a0df"></span>
              </a> &nbsp;
              <a href="{{ route('edit',$user->id)}}">
                <span class="glyphicon glyphicon-pencil" style=" color:green">
              </a>&nbsp;
              <a href="{{ route('delete',$user->id) }}"  onclick="return confirm('Are you sure to delete?')">
                <span class="glyphicon glyphicon-trash" style=" color:red"></span>
              </a>
            </td>
          </form>  
        </tr>
        @endforeach
      </tbody>
      </thead>
    </table>

控制器搜索功能：

public function search(Request $request)
{
  $search = $request->id;
  if (is_null($search)) {
    return view('admin.datas.create');        
  } else {   
    $users = data::where('name','LIKE',"%{$search}%")
                   ->get();
    return view('admin.datas.create',compact('users'));
        // return view('demos.livesearchajax')->withPosts($posts);
  }
}

Answer 1

好的。因此，jquery的问题就在这里。

解决方案1 :

首先将id添加到表单中：

<form id="search-form" class="navbar-form navbar-right" method="get"> 

       // id is added on above line

      <div class="form-group">
       <input type="text"  class="form-control" id="search" placeholder="Search Here.." 
             value="{{ request('search') }}">
     </div>
     <button type="submit" id="search" class="btn btn-default">Submit</button>
  </form>

对于jquery，请使用：

<script>
    $(document).ready(function(){
    $("#search-form").on('submit',function(e){  // Use form submit event
      e.preventDefault();
      var str=  $("#search").val();
      if(str == "") {
         $( "#tabledata" ).html( data );   
       } else {
          $.get( "{{ url('create?id=') }}"+str, 
          function( data ) {
             $( "#tabledata" ).html( data );   
         });
        }
     });  
  }); 
</script>

解决方案2 :

将按钮类型从submit更改为button，这样它就不会提交表单

<form class="navbar-form navbar-right" method="get">
 <div class="form-group">
   <input type="text"  class="form-control" id="search" placeholder="Search Here.." 
         value="{{ request('search') }}">
 </div>
 <button type="button" id="search" class="btn btn-default">Submit</button>

 // type changed on above line

​

不要在button元素上使用单击事件，它将绑定到当前页面上的所有按钮，使用"#search“id绑定单击事件

<script>
$(document).ready(function(){
   $("#search").on('click',function(e){  // Use button id to bind event