这个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; } }
//最后就可以在前台进行显示了(此文章仅仅作为自己学习路上的一篇笔记,下一步就是把这个方法进行封装,然后做模板,就可以不断的调用了,最后掌握原理与基础很重要.....)