Tp框架裡進行ajax無重新整理查詢
阿新 • • 發佈:2018-11-12
這個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; } }
//最後就可以在前臺進行顯示了(此文章僅僅作為自己學習路上的一篇筆記,下一步就是把這個方法進行封裝,然後做模板,就可以不斷的呼叫了,最後掌握原理與基礎很重要.....)