1、关于动态加载页面数据的问题：

转载 于 2016-10-11 18:29:00 发布 · 195 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/RedBlack/p/5937678.html
文章标签：

#javascript #json #ViewUI

本文介绍四种网页动态加载技术：使用clone()方法、字符串拼接结合元素父子关系、字符串拼接结合replace()方法及模板加载。每种技术均通过具体实例进行讲解。

（1）、使用“clone()”方法进行动态加载

<body>
<div class="top">
<a href="javascript:history.go(-1);"><img src="img/ic-return-big.png" class="fh_t"></a>
<p class="zbt">我的粉丝</p>
</div>

<div id='all_div' class="all_main">
<div class="main_top">
<input id="name" type="text" class="main_input"
placeholder="请输入会员名称搜索" /> <a href="javascript:searchByNickname();"><img
src="img/btn-search.png"></a>
</div>
<div id="all_div_content" style="position: absolute;width: 100%;bottom: 0px;top:75px;overflow: scroll;">

<div id="emptyList" onclick="displayPeasonDetail(this);"class="main_content" style="display: none;">
    <img id="img" class="main_content_1 bor_tx1" onerror="onHeadError(this);">
	<div class="main_content_2">
		<p id='nickName' class="main_content_p1"></p>
		<p id='sys' class="main_content_p2"></p>
	</div>
	<img onclick="displayPeasonDetail();" class="main_content_3" src="img/celebrities-btn-detail.png">
</div>

</div>
</div>
</body>


使用“clone()”方法进行动态加载

<script type="text/javascript">
　　var start = 0;
　　var end = 11;

　var canLoad = true;

　　var nickName;
　　
$(function() {

//滚动条的事件

$('#all_div_content').scroll(function() {
　　var a = $(this)[0].scrollHeight;
　　var b = $(this)[0].scrollTop;
　　var c = $("#all_div_content").height();
　　//当到达底部或者距离为60px时自动从后台加载数据
　　if ((b + c + 60 == a || b + c == a) && canLoad) {
　　　　getAllFans();
　　}
});
getAllFans();

});
function getAllFans() {

//ajax进行post请求
$.ajax({
　　type : 'post',
　　url : getUrl() + 'getAllFansList.do',
　　dataType : 'json',
　　data : {
　　　　'start' : start++,
　　　　'end' : end
　　},
　　xhrFields : {
　　　　withCredentials : true
　　},
　　success : loadMyFans
});

}

function loadMyFans(data) {
　　if (data.msg.state > 0) {
　　for (var i = 0; i < (end - 1) && i < data.fans.length; i++) {
　　　　var fan = data.fans[i];
　　　　var s = $('#emptyList').clone();
　　　　s.attr('id', fan.id);
　　　　s.attr('state',fan.state);
　　　　s.find('#img').attr('src', fan.img+'');
　　　　s.find('#nickName').html(fan.nickname);
　　　　s.find('#sys').html(fan.synopsis!=undefined?fan.synopsis:"&nbsp;");
　　　　s.css('display', 'inline-block');
　　　　$('#all_div_content').append(s);
　　}
　　if (data.fans.length < end) {
　　　　canLoad = false;
　　}
} else {
alert("登陆超时，请重新登录");
goToLogin(true);
}

}

</script>


（2）、使用“字符串拼接---(利用元素的父子关系进行加载)”方式进行动态加载：

<body >
<div class="top">
　　<div class="bt_cd">
    	<div id="personId" class="bt_cd_a">人物</div>
        <div id="questionId">问题</div>
    </div>
    <img  src="img/btn-search.png" class="sch_t" onclick="seach()">
</div>
<div id="scoll"  class="scoll">
	<div class="bt_2">
    	　　<div id="recommends" >推荐</div>
        　　<div id="recentLists">新晋榜</div>
        　　<div id="talents" class="bt_2_a">才华榜</div>
    　　</div>
    <div class="biaoti" >
    　　<p class="zitistyle fl">
　　　　　　　　 <img src="img/talent-list.png" class="imgstyle2 fl"/>
　　　　　　　　<strong>才华榜单</strong>
　　　　</p>
    </div>
    <div id="InfoDiv"  class="liebiao">
　　　　　　
    </div>
</div>
</body >





<script type="text/javascript">
　　var start =0;// 分页标示
　　var end = 11;//每次默认读取11条记录
　　var canLoad = true;//标示信息是否完全读取

　　function getUerInformation(){
　　　　$.ajax({
　　　　　　type:"POST",
　　　　　　url:getUrl()+"talentpersonlist.do",
　　　　　　data:{"start":start,"end":end},
　　　　　　dataType:"JSON",
　　　　　　xhrFields: {
　　　　　　　　withCredentials: true
　　　　　　},
　　　　　　success:talentList
　　　　　　});
　　　　　　start++;
　　}

　　function talentList(data){
　　　　for(var i = 0;i < Math.min(data.talentPersons.length,end-1);i++) {
　　　　　　var item = data.talentPersons[i];
　　　　　　$('#InfoDiv:last-child').append(' <div class="liebiao" onClick="getDetail('+item.id+')"></div>');
　　　　　　$('.liebiao:last').prepend('<div style="float:left;width:70%;"><p class="name"><strong>'+item.nickname+'</strong></p><p class="label" 　　　　　　　　　　　　　　style="width:auto;">'+item.synopsis+'</p></div>');
　　　　　　$('.liebiao:last').prepend('<div style="float:left"><p><img class="touxiang" src="'+item.img+'" onerror="onHeadError(this)"></p></div>');
　　　　　　$('.liebiao:last').prepend('<div style="float:right;"><p ><img class="xiangxi" src="img/ic-arrows.png"></p></div>');
　　　　}
　　if(data.talentPersons.length<end){
　　　　canLoad=false;
　　}
　　}
　　function getDetail(id){
　　window.location.href="question-person-detail.html?uid="+id;
　　}

$(document).ready(function(){
getUerInformation();
$("#scoll").scroll(function(){
var a = $(this)[0].scrollHeight;
var b = $(this)[0].scrollTop;
var c = $("#scoll").height();
//当到达底部或者距离为60px时自动从后台加载数据
if((b + c+ 60 == a||b + c == a)&&canLoad){
getUerInformation();
}
});


function seach(){
window.location.href="question-person-search.html";
}
</script>

（3）、使用“字符串拼接---(利用replace()方法进行替换)”方式进行动态加载：<body >

<div class="top">
	<div class="bt_cd">
    	<div id="personId"  class="bt_cd_a">人物</div>
        <div id="questionId">问题</div>
    	
    </div>
    <img  src="img/btn-search.png" class="sch_t" onclick="seach()">
</div>
<div id="scoll" class="scoll">
	<div class="bt_2">
    	<div id="recommends" >推荐</div>
        <div id="recentLists" class="bt_2_a">新晋榜</div>
        <div id="talents">才华榜</div>
    </div>
    <div class="biaoti" >
     <p class="zitistyle fl"><img src="img/ic-recent-list.png" class="imgstyle fl"/><strong>新晋榜单</strong></p>
    </div>
    
</div>
</body>



javascript代码如下：
<script type="text/javascript">
    var start =0;// 分页标示
    var end = 11;//每次默认读取11条记录
    var canLoad = true;//标示信息是否完全读取
    
    
    function getUerInformation(){
    	$.ajax({
    	　　type:"POST",
    	    url:getUrl()+"recenttimepersonlist.do",
    	    data:{"start":start,"end":end},
    	    dataType:"JSON",
    	    xhrFields: {
                withCredentials: true
            },
    	    success:RecentList,
    	    error:function(){
　　　　　　　　　　alert("加载失败！");
    	    }
    	});
    	start++;
    }
    
    function RecentList(data){
    	//当的数据小于默认值时表示加载完成
        if(data.persons.length<end){
            canLoad=false;
        }
        //format变量中的内容为：所动态加载的内容------“所需替换的量均已@xxx的形式出现”
        var format = '<div id="liebiaoDiv" class="liebiao" onClick="getDetail(@id)"><div style="float:right;"><p ><img class="xiangxi" src="img/ic-arrows.png"></p></div><div style="float:left"><p><img class="touxiang" src="@img" onerror="onHeadError(this)"></p></div><div style="float:left;width:70%;"><p class="name"><strong>@nickname</strong></p><p class="label" style="width:auto;">@synopsis</p></div></div>';
        for(var i = 0;i<Math.min(data.persons.length,10);i++)
        {
            var item = data.persons[i];
            var line = format.replace(/@id/g,item.id).replace(/@nickname/g,item.nickname).replace(/@synopsis/g,item.synopsis).replace(/@img/g,item.img);            
            $('#scoll').append(line);
        }
	}
    function getDetail(id){
         window.location.href="question-person-detail.html?uid="+id;
        }
    $(document).ready(function(){
    	 getUerInformation();
    	$("#scoll").scroll(function(){
    		var a = $(this)[0].scrollHeight;  
			var b = $(this)[0].scrollTop;  
			var c = $("#scoll").height(); 
			//当到达底部或者距离为60px时自动从后台加载数据
			if((b + c+ 60 == a||b + c == a)&&canLoad){
			    getUerInformation();
			
			 }
    	});
    	
</script>

　　（4）、最简洁的一种方法：使用模板进行相应的加载：

<body>
<div class="top">
	<div class="bt_cd">
    	　　<div id="question-person" class="bt_cd_a" >人物</div>
       　　 <div id="question-question" >问题</div>
    　　</div>
   　　 <img id="searchImg"  src="img/sch@1x.png" class="sch_t">
</div>
<div id="talentScollDiv" class="scoll">
	
	<!-- 广告 -->
	<div class="banner" id="bannerAnimation">
	</div>
	<script type="text/javascript">
		$("#bannerAnimation").load("animationAdv.html",function(){
			//传入参数进去
		});
	</script>

	<div class="tab ft15">
		<div id="recommendsDiv" >
			<p ><img src="img/ic-recommends2.png" align="absbottom" ><span >推荐</span></p>
		</div>
		<div id="recentsDiv" >
			<p><img src="img/ic-recents.png" align="absbottom" ><span >新晋榜</span></p>
		</div>
		<div id="talentsDiv" >
			<p><img src="img/ic-talents-light.png" align="absbottom" ><span class="dq">才华榜</span></p>
		</div>
	</div>
　　　　　　<!-- 所需动态加载的一段HTML重复代码  -->
  <!--  <div class="list_m" style="margin-top: 0;">
		<div class="list_li">
			<div class="list_t">	<img src="img/C25F6E09-765C-41E0-A9E5-BB59B558726F@2x.png" /></div>
			<div class="list_r"><p class="ft20" style="margin-top: 2.5rem;">Debra Richardson</p><p class="ft18">职业经理人</p></div>
		</div>
	</div> -->
		<!-------------- 读取列表模板 ----------------------->
		<script id="talentstpl" type="text/html">
			<div class="list_m" style="margin-top: 0;" onclick="goPersondetail({{id}})">
				<div class="list_li">
					<div class="list_t">	
						<img src="{{img}}" onerror="onHeadError(this)" />
					</div>
					<div class="list_r">
						<p class="ft20" style="margin-top: 2.5rem;">{{nickname}}</p>
						<p class="ft18">{{title}}</p>
					</div>
				</div>
			</div>
		</script>
	
   	
 </div>
    
<div class="foot" id="universalBottom">
</div>
<script type="text/javascript">
	$("#universalBottom").load("universal-bottom.html",function(){
		intiBottomTag("question");
	});
</script>
</body>




所替换的JavaScript代码如下：

<script type="text/javascript">
　　//变量的定义
　　var start=0;
　　var end=11;
　　var canLoad=true;

　　//页面加载事件
　　$(function(){
　　　　getTalentLists();
　　　　//滚动条事件
　　　　$("#talentScollDiv").scroll(function(){
　　　　　　var a = $(this)[0].scrollHeight;
　　　　　　var b = $(this)[0].scrollTop;
　　　　　　var c = $("#talentScollDiv").height();
　　　　　　//当到达底部或者距离为60px时自动从后台加载数据
　　　　　　if((b + c+ 60 == a||b + c == a)&&canLoad){
　　　　　　　　getTalentLists();
　　　　　　}
　　　　});
　　});
　　function getTalentLists(){
　　　　$.ajax({
　　　　　　type:"POST",
　　　　　　url:getUrl()+"talentpersonlist.do",
　　　　　　data:{"start":start,"end":end},
　　　　　　dataType:"JSON",
　　　　　　xhrFields: {
　　　　　　　　withCredentials: true
　　　　　　},
　　　　　　success:analyseTalentLists
　　　　});
　　　　start++;
　　}
　　function analyseTalentLists(data){

　　<!--  关键代码 -->

　　　　for(var i=0;i<(end-1) && i < data.talentPersons.length;i++){
　　　　　　var talentPerson=data.talentPersons[i];
　　　　　　var t=template("talentstpl",talentPerson);
　　　　　　$("#talentScollDiv").append($(t));
　　　　}

　　　　//当的数据小于默认值时表示加载完成
　　　　if(data.persons.length<end){
　　　　　　canLoad=false;
　　　　}
　　}

function goPersondetail(id){
window.location.href="question-person-detail.html?uid="+id;
}

</script>

　　

转载于:https://www.cnblogs.com/RedBlack/p/5937678.html

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值