（新手）thinkkphp3.2+AJAX异步搜索加载即页面不刷新加载数据的实现t

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

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

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

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

这就是前端页面的代码，大致就是这样，从代码可以知道，就是定义一个搜索框和一个空白，根据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异步搜索页面！！！