分页之射流研究…前端实现和请求处理代码，供大家参考，具体内容如下

index.html

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title document/title link rel='样式表href=' CSS/public。H2跨度编号/span跨度姓名/span跨度性别/span跨度分数/span/H2 ul class=' con ' id=' content ' Li span 1/span span XXX/span span男/span SPan 90/span/Li/ul div class=' page ' id=' page ' SPan第一页/span上一页/SPan ul class=' page num ' id=' page num ' li1/Li Li 2/Li Li/Li Li 4/Li Li 5/Li/ul SPan下一页/SPan最后一页/SPan输入类型='text' id='numInp '值=' 1 '/span/div/div脚本src=' js/Ajax。js /脚本var pageModule=(function(){ //获取需要操作的数字正射影像图元素var内容=文档。getelementbyid(' content ')、page=document。getelementbyid(' page ')、page num=document。getelementbyid(' page num ')、numip=document。getelementbyid(' numip ')；//设定当前也和总页数及本次请求的数据var n=1，total=0，data=null//实现页面数据绑定及其他数据的绑定函数BindHTML(){//内容绑定var str=for(var I=0；idata . lengthi){ var CodeTa=data[I]；str=' Li studentId='鱼腥草[' id ']' ' '；str=' span ' CODATa[' id ']'/span '；str=' span ' Codeata[' name ']'/span；str=' span '(CoDeata[' sex ']==1？女' : '男)'/span '；str=' span ' Codata[' score ']'/span；str='/Li '；} content.innerHTML=str//页面绑定字符串=' ';for(I=1；I=总数；I){ if(I===n){ str=' Li class=' BG ' ' I '/Li '；继续；} str="Li "我/李；} PageNum . InnerHTMl=str///NuMinP绑定NumInP。值=n；} //事件委托实现分页区域的按钮操作给文本框进入键绑定操作函数BindEvent(){ page。onclick=function(e){ e=e | | window。事件；var tar=e . target | | e . srcelelement tarTag=tar。标记名。touppercase()，Tarinn=tar . innerHTML if(TarTag==' SPAN '){ if(Tarnn==' FIST '){ if(n===1){ return；} n=1；} if(Tarinn==' LAST '){ if(n===total){ return；} n=总数；} if(Tarinn===' PREV '){ if(n===1){ return；} n-；} if(Tarinn==' NEXT '){ if(n===total){ return；} n；} } if(tarTag==' LI '){ if(n===parseFloat(Tarinn)){ return；} n=ParseFloat(Tarinn)；}//INPUT if(tarTag===' INPUT '){ return；} //重新发送请求sendAJAX()} NuMinP。onkey up=function(e){ e=e | | window。事件；if(e .键码===13){//回车键var val=parsefloat(this.value.replace(/^ | $/，' ')；if(ISnan(val)){ this。值=n；返回；} val=数学。如果(val 1){ n=1，则舍入(val );}否则if(val total){ n=total；} else { n=val } SendAJax()；} } }//内容区域的里跳转事件函数bindLink(){ var oLis=content。getelementsbytagname(' Li ')；for(var I=0；长度；i ){ oLis[i].onclick=function(){//window。位置。href='详细信息。html '；//在跳转的时候还需要把当前点击学员得身份传到详情页面window.open('detail.html？id=' this。GetAttribute(' Studentid ')；} } }函数sendAJax(){ AJax({ URL : '/GetList？n=' n，成功：函数(JSON数据){ if(JSON数据)JSON数据。code===0){ total=JSON数据[' total ']；data=jsonData[' data ']；绑定HTMl()；bindLink()；} } }) } //模块入口函数init(){ SendAJax()；bindEvent()；}返回{ init : init } })()页面模块。init()；/script/body/htmldetail.html

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title document/title link rel='样式表href=' CSS/public。CSS ' charset=' utf-8 '/头体ul class=' box 2 ' id=' box 2 ' Li span编号/span span4/span /li li span姓名/span spanxxx/span /li li span性别/span跨度男/span /li li span分数/span span 99/span/Li/ul脚本src=' js/Ajax。js '/script脚本字符串。原型。querylparameter=function(){//参数var obj={ }，reg=/([^？=] )=([^?=])/g；this.replace(reg，function(){ var key=参数[1]，值=参数[2];obj[key]=值；});//-HASH //reg=/#([^？=] )/;//if(reg。test(this)){//obj[' hash ']=reg。exec(this)[1]；//}返回obj } var detail module=(function(){ var data=null，urlId=window。位置。href。queryrolparameter().id，ObOx=document。GetElementByID('框2 ')；函数bind HTMl(){ var str=' '；str='lispan编号/span span ' data[' id ']'/span/Li '；str='lispan编号/span span ' data[' name ']'/span/Li；str='lispan编号/spanspan '(数据['sex']==1？男' : '女)'/span/Li '；str='lispan编号/span span ' data[' score ']'/span/Li；oBox.innerHTML=str}函数init(){ ajax({ url:'/getInfo？id=' urlId，success :函数(JSON数据){ if(JSON数据)JSON数据。code===0){ data=JSON data[' data ']；绑定HTMl()；} } }) }返回{ init : init } })))Detailmoduel。init()；/脚本/正文/html最终效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。