js 페이지 의 전단 코드 구현 및 요청 처리

8274 단어 js페이지 를 나누다
페이지 별 js 전단 실현 및 요청 처리 코드 를 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" href="css/public.css" charset='utf-8'>
</head>
<body>
 <div class='box'>
 <h2>
  <span>  </span>
  <span>  </span>
  <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>FIRST</span>
  <span>PREV</span>
  <ul class='pageNum' id='pageNum'>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  </ul>
  <span>NEXT</span>
  <span>LAST</span>
  <input type="text" id='numInp' value='1'/>
 </div>
 </div>
 <script src='js/ajax.js'></script>
 <script>
 var pageModule = (function(){
  //       DOM  
  var content = document.getElementById('content'),
  page = document.getElementById('page'),
  pageNum = document.getElementById('pageNum'),
  numInp = document.getElementById('numInp');

  //                 
  var n = 1,total = 0,data = null;
  //                
  function bindHTML(){
  //content bind
  var str = '';
  for(var i = 0;i<data.length;i++){
   var curData = data[i];
   str+='<li studentId="'+curData["id"]+'">';
   str+='<span>'+curData["id"]+'</span>';
   str+='<span>'+curData["name"]+'</span>';
   str+='<span>'+(curData["sex"]==1 ? " " : " ")+'</span>';
   str+='<span>'+curData["score"]+'</span>';
   str+='</li>';
  }
  content.innerHTML = str;
  //page bind
  str = '';
  for(i = 1;i<=total;i++){
   if(i===n){
   str+='<li class="bg">'+i+'</li>';
   continue;
   }
   str+='<li>'+i+'</li>';
  }
  pageNum.innerHTML = str;

  //numInp bind
  numInp.value = n;

  }
  //                    enter     
  function bindEvent(){
  page.onclick = function(e){
   e = e || window.event;
   var tar = e.target || e.srcElement
   tarTag = tar.tagName.toUpperCase(),
   tarInn = tar.innerHTML;
   if(tarTag==="SPAN"){
   if(tarInn==="FIRST"){
    if(n===1){
    return;
    }
    n = 1;
   }
   if(tarInn==="LAST"){
    if(n === total){
    return;
    }
    n = total;
   }
   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.onkeyup = function(e){
   e = e || window.event;
   if(e.keyCode===13){//enter 
   var val = parseFloat(this.value.replace(/^ +| +$/,''));
   if(isNaN(val)){
    this.value = n;
    return;
   }
   val = Math.round(val)
   if(val<1){
    n = 1;
   }else if(val>total){
    n = total;
   }else{
    n = val;
   }
   sendAJAX();

   }
  }
  }
  //content   LI    
  function bindLink(){
  var oLis = content.getElementsByTagName('li');
  for(var i = 0;i<oLis.length;i++){
   oLis[i].onclick = function(){
   // window.location.href = "detail.html";
   //                 ID      
   window.open("detail.html?id="+this.getAttribute('studentId'));
   
   }
  }
  }
  function sendAJAX(){
  ajax({
   url:"/getList?n="+n,
   success:function(jsonData){
   if(jsonData && jsonData.code===0){
    total = jsonData["total"];
    data = jsonData['data'];
    bindHTML();
    bindLink();
   }
   }
  })
  }
  //    
  function init(){
  sendAJAX();
  bindEvent();
  }

  return {
  init:init
  }
 })()

 pageModule.init();
 </script>
</body>
</html>
detail.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" href="css/public.css" charset='utf-8'>
</head>
<body>
 <ul class='box2' id='box2'>
 <li>
  <span>  </span>
  <span>4</span>
 </li>
 <li>
  <span>  </span>
  <span>xxx</span>
 </li>
 <li>
  <span>  </span>
  <span> </span>
 </li>
 <li>
  <span>  </span>
  <span>99</span>
 </li>
 </ul>
 <script src='js/ajax.js'></script>
 <script>
 String.prototype.queryURLParameter = function(){
  //PARAMETER
  var obj = {},
  reg = /([^?=&#]+)=([^?=&#]+)/g;
  this.replace(reg,function(){
  var key = arguments[1],
   value = arguments[2];
  obj[key] = value;
  });
  //->HASH
  // reg = /#([^?=&#]+)/;
  // if (reg.test(this)) {
  // obj['hash'] = reg.exec(this)[1];
  // }
  return obj;
 }
 var detailModuel = (function(){
  var data = null,urlId = window.location.href.queryURLParameter().id,oBox = document.getElementById('box2');
  function bindHTML(){
  var str = "";
  str+="<li><span>  </span><span>"+data["id"]+"</span></li>";
  str+="<li><span>  </span><span>"+data["name"]+"</span></li>";
  str+="<li><span>  </span><span>"+(data["sex"]==1 ? " " : " ")+"</span></li>";
  str+="<li><span>  </span><span>"+data["score"]+"</span></li>";
  oBox.innerHTML = str;
  }

  function init(){
  ajax({
   url:"/getInfo?id="+urlId,
   success:function(jsonData){
   if(jsonData && jsonData.code===0){
    data = jsonData["data"];
    bindHTML();
   }
   }
  })
  }

  return {
  init:init
  }
 })()
 detailModuel.init();
 </script>
</body>
</html>
최종 효과 도:

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
Vue 2.0 vue-source jsonp 크로스 도 메 인 요청
위 챗 애플 릿 rich-text 사용 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage