這個ajax學的時候感覺很簡單，就沒有認真好好理解。到今天要用的時候才麻煩百出....其中一個尤為重要的問題是在拼接時出現的。還好得到了大佬的提點，才發現是自己的思路有問題（話不多說，把今天的總結一下，以後不要在出錯了......）

這是最後的效果圖

//這是未進行ajax之前的顯示程式碼（也就是不執行查詢時的顯示）
<!--資料進行顯示-->
    <table class="table table-bordered table-hover" >
        <thead>
        <tr>
            <th class="text-center" >連結名稱</th>
            <th class="text-center">所屬位置</th>
            <th class="text-center">地址</th>
            <th class="text-center">縮圖</th>
        </tr>
        </thead>
//這個id是為了ajax而做的準備
    <tbody id="content">
        {volist name="Link" id="lisres"}
        <tr >
            <!--顯示位置-->
                 <td class="text-center">{$lisres.nav_name}</td>
                 <td class="text-center">{$lisres.nav_type}</td>
                 <td class="text-center">{$lisres.nav_addres}</td>
                 <td class="text-center">
                     {if condition="$lisres['nav_img'] eq ''"}
                     暫無縮圖
                     {else\}
                     <img src='{$lisres.nav_img}' style='width: 100px' height='40px'>
                     {/if}
                 </td>
        </tr>
        {/volist}
  </tbody>
 

//ajax程式碼

<script type="text/javascript">
    //ajax操作
    $(document).ready(function(){
        $('#shaixuan').click(function(){
            //獲取input輸入的值
            var keywords=$('#key').val();
            console.log(keywords);
            $.ajax({
                method:"POST",
                url:'{:url("/admin/link/Linkres")}',//這裡要注意，需要加在前面加'/'而且要指定具體的模組和方法
                data:{'key':keywords},
                dataType:"json",
                success:function(msg) {
                   $('#content').empty();//先對原來tbody裡面的資料進行刪除
                    $("#content").append(msg);//然後把後臺返回來的資料進行新增到tbody裡面
                    //console.log(msg);
                },error:function(err,tt,kk){
                    alert('出現錯誤：'+JSON.stringify(err)+'狀態:'+tt+'原因：'+kk);
                }
    })
    })
    })
</script>
 

//後臺也就是控制器裡面的操作

public  function Linkres(){
   $data = input('key');
   if(request()->isAjax()){
      $Lin = Db::table('link')->where('nav_name', 'like', '%' . $data . '%')->order('nav_pai asc')->select();
      $l = '';
      foreach($Lin as $k=>$v){
         //$l .=111;
         $name=$v['nav_name'];
         $type=$v['nav_type'];
         $addres=$v['nav_addres'];
         $sort=$v['nav_pai'];
         $img=PICTURE.$v['nav_img'];
         $id=$v['id'];
         $l .="<tr>";
         $l .="<td><label><input class='checkboxes'  type='checkbox'  name='check' id='check' ><span class='text'></span></label></td>";
         $l .="<td style='text-align: center'>$name</td>";
         $l .="<td style='text-align: center'>$addres</td>";
         $l .="<td style='text-align: center'><img src='$img' style='width: 100px height:40px'></td>";
         $l .="<td style='text-align: center'>1</td>";
         $l .="<td style='text-align: center'>2</td>";
         $l .="<td style='text-align: center'>$sort</td>";
         $l.=" <td style='text-align: center'>
                      <a href='del ? id = $id'><button class='btn shiny btn-danger' type='button'>刪除</button></a>
                      <a href='edit ? id = $id'><button class='btn shiny btn-blue ' type='button'>編輯</button></a>
                      </td>";
         $l .="</tr>";
   }
      return $l;
   }
}

//最後就可以在前臺進行顯示了（此文章僅僅作為自己學習路上的一篇筆記，下一步就是把這個方法進行封裝，然後做模板，就可以不斷的呼叫了，最後掌握原理與基礎很重要.....）