在DOM不用拼html代码变数据的技巧，ajax分页案例

来源：互联网发布：微信怎样淘宝买东西编辑：程序博客网时间：2024/04/30 10:33

在做一旅游网站的项目的时候，ajax更新页面数据的时候，不想拼html代码，灵感突然来了，想到了一个个人感觉很爽的办法。

就是在先取得原来网页中静态的DOM数据，然后保存在一个变量中，然后把原来的删除。不过这个地方要注意的地方是，不能直接改编这个变量里面的数据，要复制一个后再改变里面的数据。如果你这个变量值使用一次直接改是没有问题的。因为你这样用会改变所有用这个变量添加到网页中的元素。

接下来我将用一个分页的案例看一下这个小技巧吧。

具体代码如下：

    //启动分页                                 var page= new spliPage();                                 //用户评论后的及时刷新                                 $("#commentForm").on("submit",function(event){                                    event.preventDefault();                                    //将分页对象传入提交提交函数，用来刷新数据                                    submitComment(page);                                 });//定义一分页对象                               function spliPage(){                                 var self=this;                                 //public                                 self.cur=0;                                  //privet                                 var curent=0;                                 //装改变数据的容器                                 var content=$("#pageContent");                                 //改变数据的模型                                 var model=$("#moudel");                                 var allPage=$("#page li.pageNumber");                                 var next=$("#next");                                 var goodsId=$("#goodsid").val();                                 //自己封装的一个添加index属性的函数，可以不用管，给页码添加index属性来判断用点击是哪一页                                  tool.addAttrIndex(allPage);                                  //清除容器中的数据                                 content.html("");                                 self.updata=function(rePage,old){                                       $.post('action.php', {"act": 'updatePage',"page":rePage,"goodsId":goodsId}, function(data) {                                         content.html("");                                        if(typeof data==="object"){                                             for(var i=0,k=data.length;i<k;i++){                                             //改变模型中的数据                                             model[0].getElementsByTagName("span")[0].innerHTML=data[i].user;                                             model[0].getElementsByTagName("p")[0].innerHTML=data[i].content;                                             model[0].getElementsByTagName("time")[0].innerHTML=data[i].time;                                             //这步中的clone非常重要                                             content.append(model.clone(true));                                             }                                         if(typeof old !="undefined"){                                           $(allPage[old]).removeClass('active');                                           }                                             $(allPage[rePage]).addClass('active');                                             //当前的页面                                             curent=rePage;                                             self.cur=curent;                                         }                                       },'JSON');                                  }                                 allPage.click(function(event) {                                      var index=parseInt($(this).attr('index'));                                         self.updata(index,curent);                                 });                                  next.click(function(event) {                                      var index=curent+1;                                      if(index<allPage.length){                                       self.updata(index,curent);                                      }else{                                      alert("已经是最后一页了");                                      }                                  });                                  //初始化页面数据                                  self.updata(0);                               }                               function submitComment(page){                                     var message=$("#message").val();                                     var goodsId=$("#goodsid").val();                                     var grade=$("#userCord").attr('number');                                     $.post('action.php',                                          {"act": 'usercomment',                                      "message":message,                                      "goodsId":goodsId,                                       "grade":grade},                                       function(data) {                                      //用这个可以直接看发到后台的报错                                      //document.write(data);                                         if(data=="1"){                                         alert("评论成功");                                         $("#message").val("");                                         page.updata(0,page.cur);                                         }else{                                         alert("评论失败");                                         }                                     });                               }

1 0