（新手）thinkkphp3.2+AJAX异步搜索加载即页面不刷

异步加载/搜索指的是在不刷新页面的情况下，更换显示，比较明显的是，如淘宝点击搜索后，页面没有刷新，但是列表却更新了数据，者就是异步加载技术，主要是利用ajax和js。

随着PHP学习的深入，慢慢会接触到有关异步加载异步的问题，网上关于异步加载讲得比较少，今天就以一个项目的例子讲解一下如何实现hinikphp框架下异步搜索加载即页面不刷新加载数据的实现！！

应用异步加载技术并不难。首先你需要懂得ajax和js的基本知识。

比如我们做个用学号搜索学生信息，做到不刷新页面数据根据输入框的学号自动变化的一个搜索页面。
前端部分stuinfo.html(记得引进jQuery,这里代码就不引进jQuery了)

<input id="student_number"  type="number" class="sea_text" placeholder="请输入学号"  />
<div id=content>
    </div>
   <div class="sea_result_con">
    </div>

<script>
$(document).ready(function() {
    var flag=sessionStorage['flag'];//定义标记，判断是否为第一次访问页面
    if(flag==undefined||flag==0){ //第一次访问页面
        getData();//获取数据
    }else{     
        $('#content').html(sessionStorage['stu_content']);
        sessionStorage['flag']=0;
        $(window).scroll(function(){
            if($(document).scrollTop()!=0){
                $(window).offsetTop = sessionStorage['offsetTop'];
            }
        });
    }

});
$('#student_number').keydown(function(event){
    if(event.keyCode==13){
        getData();
    }
});
 function getData(){
            $.ajax({
                url: "/moral/web/index.php/StuInfo/stusearch",//json文件位置
                type: "GET",//请求方式为get
                dataType: "json", //返回数据格式为json
                data:{
                    student_number:$("#student_number").val(),//获得id=student_numberd的值传到控制器接口 stusearch      
                },
               
                success: function(data) {
                    console.log(data);
                //请求成功完成后要执行的方法
                    if (data.student_name==null) {
                    $('#content').html("");
                    $(".sea_result_con").empty();
                    $(".sea_result_con").append('<span class="sea_result">查询不到该学生</span>');
                   }

                
                    if(data.student_name!=null){  
                    $("#content").empty();//先将数据清空                   
                        html =
                            '<div class="head_con">'+
                            '<span class="head_info">照片</span>'+
                            '<img src="'+data.id_photo+'" alt="" class="headimg"/></div>'+
                            '<div class="info_wrapper">'+
                            '<div class="info_line">'+
                            '<span class="info_title">姓名</span>'+
                            '<span class="info_content">'+data.student_name+
                            '</span></div>'+
                           '<div class="info_line">'+
                            '<span class="info_title">学号</span>'+
                            '<span class="info_content">'+data.student_number+
                            '</span></div>'+
                            '<div class="info_line">'+
                            '<span class="info_title">性别</span>'+
                            '<span class="info_content">';
                            html+=(data.sex==1)?"男":"女";
                            html+=                                
                            '</span></div>'+
                            '<div class="info_line">'+
                            '<span class="info_title">班级</span>'+
                            '<span class="info_content">'+data.grade_name+data.class_name+
                            '</span></div></div>'
                      ;
                        $("#content").append(html);
                        $(".sea_result_con").empty();
                        
                   }
                   sessionStorage['stu_content']=$('#content').html();
                   sessionStorage['stu_offsetTop']=$(window).scrollTop();//存下滚动条的偏移量

                }
            });
}
</script>
<script>
 sessionStorage['flag']=1;//初始化一个页数
</script>

这就是前端页面的代码，大致就是这样，从代码可以知道，就是定义一个搜索框和一个空白，根据ajax返回的数据改变空白的内容实现AJAX异步，记得引进jQuery，不然用不了，最后还有CSS和数据库。
完成前端页面的架设，我们就只需要定义这个API接口，实现返回json数据就行了。即StuInfo/stusearch方法diamante如下：

  public function stusearch(){//返回数据API接口
        $stu_num = I('GET.student_number');       
        $where['student_number'] = $stu_num;
        $stuinfo = M('student') -> where($where) -> find();       
        $this->ajaxReturn($stuinfo);
    }

 public function stuinfo(){//学生信息
        $this->display();
    }

数据库 student_number表里需要的字段：
student_number sex id_photo student_name student_number grade_name class_name

css:

.sea_wrapper{
    height: .52rem;
    background: #ffffff;
    margin-bottom: .09rem;
}
.sea_wrapper .sea_con{
    margin-left: .11rem;
    line-height: .52rem;
}
.sea_wrapper .sea_con .scan{
    float: right;
    margin-right: .095rem;
    display: inline-block;
    background: url(../images/scan_icon.png) no-repeat;
    width: .235rem;
    height: .22rem;
    background-size: contain;
    line-height: .22rem;
    margin-top: .15rem;
    border: none;
    outline: none;
}
.sea_wrapper .sea_text{
    width: 2.69rem;
    height: .28rem;
    border: 0;
    background: #eeeeee;
    -webkit-border-radius: .04rem;
    -moz-border-radius: .04rem;
    -ms-border-radius: .04rem;
    -o-border-radius: .04rem;
    border-radius: .04rem;
    background-image: url(../images/input_icon.png);
    background-repeat: no-repeat;
    background-position: 0.06rem;
    background-size: 7% auto;
    font-size: .14rem;
    text-indent: 0.32rem;
    color: #666666;
}
.head_con{
    height: .79rem;
    background: #ffffff;
    box-shadow: 0 .02rem 0.06rem #cacaca;
    -webkit-box-shadow: 0 .02rem 0.08rem #cacaca;
    -moz-box-shadow: 0 .02rem 0.08rem #cacaca;
}
.head_con .headimg{
    height: .79rem;
    width: .79rem;
    /* border-radius: .3rem; */
    float: right;
    /* margin-top: .08rem; */
    /* margin-right: .1rem; */
}
.head_con .head_info{
    font-size: .17rem;
    float: left;
    line-height: .79rem;
    padding-left: .16rem;
}
.info_wrapper{
    margin-top: .13rem;
    background: #ffffff;
    line-height: .35rem;
}
.info_wrapper .info_line{
    height: .35rem;
    border-bottom: .01rem solid #eaeaea;
}
.info_wrapper .bb0{
    border-bottom: 0;
}
.info_wrapper .info_line .info_title{
    font-size: .128rem;
    padding-left: .14rem;
}
.info_wrapper .info_line .info_content{
    font-size: .12rem;
    color: #656565;
    float: right;
    padding-right: .16rem;
}
.info_wrapper .info_line .conduct{
    font-size: .128rem;
    padding-left: .14rem;
    background: url(../images/right_arrow.png) no-repeat right center;
    background-size: contain;
    padding-right: 2.1rem;
}
.sea_result_con{
    z-index: 1;
    /*position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);*/
    text-align: center;
    margin-bottom: 0.1rem;
}

到这里，所有的代码都给出来，有需要的可以拿去借鉴一下。
CSS代码和数据库是为了给新手看的，老手就根据这个例子自己操作起来吧，做一个简单的AJAX异步搜索页面！！！