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

在做一旅游网站的项目的时候，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("评论失败");
                               	      	    }
                               	      });
                               }