ajax数据交互

前端页面与后台数据交互响应，使页面无刷新加载数据。
原生ajax比较复杂，引入jQuery后，简化了ajax代码，所以前提必须先引入jQuery！

视频教程

Ajax数据交互功能讲解，页面加载更多功能实现（1）
Ajax数据交互功能讲解，页面加载更多功能实现（2）
Ajax数据交互功能讲解，页面加载更多功能实现（3）
Ajax数据交互功能讲解，页面加载更多功能实现（4）

基本请求方式

GET/POST/AJAX

GET

$.get('请求地址',{请求参数},function(res){
    //只需成功后返回内容
    console.log(res)
    
},'json')

POST

$.post('请求地址',{请求参数},function(res){
    //只需成功后返回内容
    console.log(res)
    
},'json')

AJAX

指定发送GET或者POST请求

$.ajax({
    url:gourl,//请求的url地址
    dataType:"json",//返回格式为json，并非请求参数格式为json！
    async:true,//请求是否异步，默认true为异步，这也是ajax重要特性
    data:{},//参数值
    type:"GET",//请求方式,GET/POST
    beforeSend:function(){
        //请求前的处理，发送请求前，比如弹出加载图标进行等待过度等等
    },
    success:function(r){
        //请求成功后返回
    },
    complete:function(){
       //请求完成的处理，在success/error执行完了会执行这里，停止加载图标，显示内容
    },
    error:function(){
      //请求出错处理
      
    }



})

栏目列表运用

模板格式：ajax_list_栏目列表模板
栏目模板：list.html ajax加载模板：ajax_list_list.html

js

var p=1;//页码
function gopage(){
p+=1;//每次页码+1
//当前模块标识
$.ajax({
    url:window.location.href,//请求的url地址
，当前栏目URL
    //dataType:"json",//返回格式为json，这里要取消返回json，直接返回HTML
    async:true,//请求是否异步，默认为异步，这也是ajax重要特性
    data:{ajax:1,ajax_tpl:1,page:p},//参数值
    type:"GET",//请求方式
    beforeSend:function(){
        //请求前的处理
        istrue = false;

    },
     success:function(r){
        //判断是否没有分页，如果没有分页，则输出1
        if(r==''){
            alert('没有了~');return false;
        }
        $(".article-list").append(r);
        //直接加载到列表内

    },
    complete:function(){
        //请求完成的处理
        istrue = true;
    },
     error:function(){
    //请求出错处理
        alert('网络错误');
    }

})
}

ajax_list_*.html

根据你现有的列表模板来写，如下为例子，不是真实代码！
注意顶部的代码必须置顶，视频教程有说明：请先看看视频教程

{if($lists)}
{foreach $lists as $v}
    <div class="clean-blog-post">
        <div class="row">
            <div class="col-lg-5"><img class="rounded img-fluid" src="{if($v['litpic']=='')}{$tpl}assets/img/tech/image4.jpg{else}{$v['litpic']}{/if}"></div>
            <div class="col-lg-7">
                <h3>【{$v['id']}】{$v['title']}</h3>
                <div class="info"><span class="text-muted">{fun date('Y-m-d',$v['addtime'])}&nbsp;<a >{fun get_info_table('level',['id'=>$v['userid']],'name')}</a></span></div>
                <p>{fun newstr($v['description'],150)}</p><a href="{$v['url']}"><button class="btn btn-outline-primary btn-sm" type="button">了解更多</button></a></div>
        </div>
    </div>
{/foreach}
{/if}