异步加载/搜索指的是在不刷新页面的情况下，更换显示，比较明显的是，如淘宝点击搜索后，页面没有刷新，但是列表却更新了数据，者就是异步加载技术，主要是利用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异步搜索页面！！！
网友评论