Ajax异步请求（重渲染DOM元素时，如何自动调用并执行JS自定义函数【含代码】）- 案例篇

最新推荐文章于 2023-09-08 14:17:40 发布
最新推荐文章于 2023-09-08 14:17:40 发布
阅读量1.3k 收藏 1
点赞数 1
分类专栏： JavaScript 跨域请求
本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！
本文链接：https://blog.csdn.net/qq_35393869/article/details/105751632
版权

文章目录

Ajax异步请求（重渲染DOM元素时，如何自动调用并执行JS自定义函数【含代码】）- 案例篇

效果截图：

在这里插入图片描述

重要代码：

/*具体函数定义，如下*/
//文章list区域：拼接渲染
var str = '';
	for(var i=0;i<group.length;i++){
		var imgurl = group[i].thumbnail;
		if(imgurl != ''){
			str += '<li class="mui-table-view-cell mui-media line">'
					+'<a href="http://192.168.0.109:8080/cmsarticle/'+'1/' + id + '/'  + group[i].content_id+'.html">'
					+'<img class="mui-media-object mui-pull-left scyl-img" src="'
					+'http://192.168.0.109:8081/ofcms-admin'+imgurl
					+'">'
					+'<div class="mui-media-body">'
					+'<p class="scyl-title">'
					+group[i].title_name+'</p>'
					+'<p class="scyl-uptime">'+getLocalTime(group[i].create_time)+'</p>'
					+'</div></a>'
					+'</li>';
		} else {
			str += '<li class="mui-table-view-cell mui-media line">'
					+'<a href="http://192.168.0.109:8080/cmsarticle/'+'1/' + id + '/'  + group[i].content_id+'.html">'
					+'<img class="mui-media-object mui-pull-left scyl-img" src="static.docs.v1.1/images/scyl_2/default.jpg">'
					+'<div class="mui-media-body">'
					+'<p class="scyl-title">'
					+group[i].title_name+'</p>'
					+'<p class="scyl-uptime">'+getLocalTime(group[i].create_time)+'</p>'
					+'</div></a>'
					+'</li>';
		}
	}	


/* AJAX异步渲染DOM的时候，需要同步执行的函数*/
//转换日期格式
function getLocalTime(nS) {
	return new Date(parseInt(nS) ).toLocaleString().replace(/:\d{1,2}$/,' ');

}

附：全部HTML代码：

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="Description" content="考试加油站，特服宝典，特种作业学习平台"/>
	<meta name="Keywords" content="考试加油站，特服宝典，特种作业学习平台"/>
	<meta name="author" content="witherliu@foxmail.com"/>
	<title>考试加油站</title>	
	<link rel="stylesheet" href="static.docs.v1.1/plugins/mui/css/mui.min.css">
	<!--mui下拉导航组件 · 动画-->
	<link rel="stylesheet" type="text/css" href="static.docs.v1.1/plugins/mui/css/nav.animate.css"/>
	<!--考试加油站-->
	<link rel="stylesheet" type="text/css" href="static.docs.v1.1/css/m_shicaolilun.css"/>
	<style type="text/css">
			#tagjsp{
				display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
			}
		</style>
</head>

<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left"><span class="mui-icon mui-icon-left-nav"></span>返回</a>
		<a id="icon-menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right"></a>
		<h1 class="mui-title">考试加油站</h1>
	</header>
	<nav class="mui-bar mui-bar-tab nav-page" id="fixedpage">
		<!--分页-->
		<div class="mui-content-padded mgtb0">
			<ul class="mui-pager">
				<li class="bd0"><a onclick="prePageFun()">上一页</a></li>
				<li class="on"><a>1</a></li>
				<li class="bd0"><a onclick="nextPageFun()">下一页</a></li>
			</ul>
		</div>
	</nav>
	<div class="mui-content pdb60" style="background: none;">
		<!--选项卡-->
		<div style="position: fixed;top: 50px;left: 0;width: 100%;z-index: 10;">
			<div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted sc-tabs">
				<a class="mui-control-item navli mui-active" onclick="categoryFun(26,'category',0,'高压电工')" id="category_26">报考指南</a>
			</div>
		</div>
		<!--分类导航 · 位置固定-->
		<div class="mui-card scroll-gz" style="border-radius: 0;margin: 0;box-shadow:none;position: fixed;top: 100px;left: 0;z-index: 10;width: 100%;">
			<div class="mui-card-footer bfnone overflw-x"  id="tagjsp">
				<a class="mui-btn gzbg" onclick="tagFun(28,'tag',0,'高压电工')" id="gzbg_28">考试动态</a>            
			</div>
		</div>
		
		<!--卡片区域-->
		<div style="padding-top: 95px;">
				<div id="article-ul" class="mui-control-content tab-pane mui-active">
					<ul class="mui-table-view bfnone">
						<li class="mui-table-view-cell mui-media line">
							<a href="">
								<img class="mui-media-object mui-pull-left scyl-img" src="static.docs.v1.1/images/scyl_2/01.jpg">
								<div class="mui-media-body">
									<p class="scyl-title">新手学习电焊初期的 焊接技巧</p>
									<p class="scyl-uptime">2018.05.23</p>
								</div>
							</a>
						</li>		
					</ul>
				</div>
				<!--<div style="width: 100%;height: auto;">
					<img src="static.docs.v1.1/images/qst-dflt.png" style="margin: 0 auto;width: 100%;height: auto;"/>
					<p style="text-align: center;color: #333333;font-size: 18px;">暂无数据</p>
				</div>-->
				
		</div>
		
		
		
	</div>
	<div id="menu-wrapper" class="menu-wrapper hidden">
		<div id="menu" class="menu line0">
			<ul class="mui-table-view mui-table-view-inverted">
				<li class="navlink-btns">
					<a href="index - 旧版 - 新升级.html">首页</a>
				</li>
				<li class="navlink-btns">
					<a href="#1">试题查询</a>
					<a href="#2">模拟考试</a>
					<a href="#3">全真题库</a>
					<a href="m_shicaolilun.html">实操理论</a>
					<a href="#5">易错题库</a>
					<a href="#6">做题排行</a>
					<a href="#6">课件讲义</a>
				</li>
				<li class="navlink-btns">
					<a href="m_meiriyilian.html">每日一练</a>
					<a href="#2">智能组卷</a>
					<a href="m_tglyc.html">通过率预测</a>
					<a href="m_kaoshijiayouzhan.html">考试加油站</a>
				</li>
				<li class="navlink-btns">
					<a href="#1">我的错题</a>
					<a href="#2">我的收藏</a>
					<a href="#3">考试记录</a>
				</li>
				<li class="navlink-btns">
					<a href="m_kaoshijiayouzhan.html?#m_bkzn">报考指南</a>
					<a href="m_kaoshijiayouzhan.html?#m_hyzx">行业资讯</a>
				</li>
				<li class="nav-grid-3">
					<ul class="mui-table-view mui-grid-view mui-grid-9">
						<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
							<a href="">
			                    <span class="mui-icon slt_stcx"></span>
			                    <div class="mui-media-body">试题查询</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
							<a href="">
			                    <span class="mui-icon slt_mnks"></span>
			                    <div class="mui-media-body">模拟考试</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
							<a href="">
			                    <span class="mui-icon slt_qztk"></span>
			                    <div class="mui-media-body">全真题库</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
							<a href="m_shicaolilun.html">
			                    <span class="mui-icon slt_scll"></span>
			                    <div class="mui-media-body">实操理论</div>
							</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
	<div id="menu-backdrop" class="menu-backdrop bghalf"></div>
	<script src="static.docs.v1.1/plugins/mui/js/mui.min.js"></script>
	<!--mui下拉导航组件：点击切换 · 跳转链接-->
	<script src="static.docs.v1.1/plugins/mui/js/mui_link.js"></script>
	<!--逻辑专属-->
	<script src="static.docs.v1.1/js/jquery.min.3.1.0.js" type="text/javascript" charset="utf-8"></script>
	<!--文章刷新-->
<script type="text/javascript">
var linkurl = 'http://192.168.0.109:8080/cmsarticle/getColumnArticles.do';
var tagurl = 'http://192.168.0.109:8080/cmsarticle/menu.do';
var articleurl = 'http://192.168.0.109:8080/cmsarticle/getLabelArticles.do';
var pageNum=1, sizeNum=2, tagtype= 'category', eq=0, thisid=26, keywd='高压电工'; // 默认点击标签类型
window.onload = categoryFun(thisid,tagtype,eq,keywd,pageNum,sizeNum); //参数1~3：id,栏目层级，文章显示初始化eq值

//上一页
function prePageFun(id,pageNum,sizeNum,linkMark){
	nextPageFun(id,pageNum,sizeNum)
	
}
//下一页
function nextPageFun(id,pageNum,sizeNum,linkMark){	
	if(linkMark==1){
		linkMark=linkurl;
	} else {
		linkMark=articleurl;
	}
	$.ajax({ 
		type:"get", //提交方式
		data:{ "id" : id,"keyWord": keywd,"page":pageNum,"size":sizeNum}, //查询的参数
		url: linkMark, //提交的路径
		dataType:"json", //返回的类型  是Text文本
		success:function(data){
	//	        	console.log(data);
			if(data==0) {
				console.log("不可以使用");
			}else{
				//获取需要的数据
				var group = data.data ;		
				console.log(data);
				//文章list区域：拼接渲染
				var str = '';
				for(var i=0;i<group.length;i++){
					var imgurl = group[i].thumbnail;
					if(imgurl != ''){
						str += '<li class="mui-table-view-cell mui-media line">'
								+'<a href="http://192.168.0.109:8080/cmsarticle/'+'1/' + id + '/'  + group[i].content_id+'.html">'
								+'<img class="mui-media-object mui-pull-left scyl-img" src="'
								+'http://192.168.0.109:8081/ofcms-admin'+imgurl
								+'">'
								+'<div class="mui-media-body">'
								+'<p class="scyl-title">'
								+group[i].title_name+'</p>'
								+'<p class="scyl-uptime">'+getLocalTime(group[i].create_time)+'</p>'
								+'</div></a>'
								+'</li>';
					} else {
						str += '<li class="mui-table-view-cell mui-media line">'
								+'<a href="http://192.168.0.109:8080/cmsarticle/'+'1/' + id + '/'  + group[i].content_id+'.html">'
								+'<img class="mui-media-object mui-pull-left scyl-img" src="static.docs.v1.1/images/scyl_2/default.jpg">'
								+'<div class="mui-media-body">'
								+'<p class="scyl-title">'
								+group[i].title_name+'</p>'
								+'<p class="scyl-uptime">'+getLocalTime(group[i].create_time)+'</p>'
								+'</div></a>'
								+'</li>';
					}
						
						
				}
				//增加查看全部
				if(group.length == 0){
					str="";
					str += '<li class="article-a-li-more">'
							+'<a class="mui-badge a-more">暂无数据</a>'
							+'</li>';
				} else {
					
				}			
							
				str = '<ul class="mui-table-view bfnone">'
					+str 
					+'</ul>';
				//list拼接渲染
				$('#article-ul').html(str);
				
				//覆写上一页下一页
				var pagestr = '';
				var prePage = data.prePage;
					hasNextPage = data.hasNextPage,
					nextPage = data.nextPage,
					hasPrePage = data.hasPrePage;
				thisid = data.id;
				console.log("::"+prePage+hasNextPage+nextPage+hasPrePage+thisid)
				
				//当前页码
				var thisPage = prePage+1;
				
				if(hasPrePage==false && hasNextPage==true){ //没有上一页
					pagestr += '<!--分页-->'
						+'<div class="mui-content-padded mgtb0">'
						+'<ul class="mui-pager">'
						+'<li class="on"><a>'+thisPage+'</a></li>'
						+'<li class="bd0"><a onclick="nextPageFun('
						+	thisid+','+nextPage+','+sizeNum
						+')">下一页</a></li>'
						+'</ul>'
						+'</div>'
				}
				if (hasPrePage==true && hasNextPage==false){ //沒有下一頁
					pagestr += '<!--分页-->'
						+'<div class="mui-content-padded mgtb0">'
						+'<ul class="mui-pager">'
						+'<li class="bd0"><a onclick="prePageFun('
						+	thisid+','+prePage+','+sizeNum
						+')">上一页</a></li>'
						+'<li class="on"><a>'+thisPage+'</a></li>'
						+'</ul>'
						+'</div>'
				} 
				if (hasPrePage==true && hasNextPage==true) { //有上下翻页
					pagestr += '<!--分页-->'
						+'<div class="mui-content-padded mgtb0">'
						+'<ul class="mui-pager">'
						+'<li class="bd0"><a onclick="prePageFun('
						+	thisid+','+prePage+','+sizeNum
						+')">上一页</a></li>'
						+'<li class="on"><a>'+thisPage+'</a></li>'
						+'<li class="bd0"><a onclick="nextPageFun('
						+	thisid+','+nextPage+','+sizeNum
						+')">下一页</a></li>'
						+'</ul>' 
						+'</div>'
				}
				//统一渲染赋值
				$("#fixedpage").html(pagestr);
			}
		}
	});
	
}

function categoryFun(id,type,eq,keyword,pageNum,sizeNum){	
	if(id != thisid){ //如果切换一级栏目
		pageNum =1;
	}
	tagtype =  type;
	keywd = keyword;
	var catedata=[];
	$.ajax({ 
		type:"get", //提交方式
		data:{ "id" : id,"keyWord": keywd,"page":pageNum,"size":sizeNum}, //查询的参数
		url: linkurl, //提交的路径
		dataType:"json", //返回的类型  是Text文本
		success:function(data){
	//	        	console.log(data);
			if(data==0) {
				console.log("不可以使用");
			}else{
				//console.log("可以使用categoryFun");
				//获取需要的数据
				var group = data.data ;	
				var catedata  = data.menus[0].children ;		
				/*
				console.log(catedata[0].children)
				//catedata = JSON.stringify(catedata)
				console.log(catedata[eq].children.length)
				console.log(catedata[eq].children[0].name)
				console.log(catedata[eq].children[1].name)
				*/
				//	逻辑重调：终止引发的问题
				var tagstr="";
//				console.log("keyword=="+keyword);
				for(var i=0;i<catedata[eq].children.length;i++){
					tagstr += '<a class="mui-btn gzbg gzbg_'   
						+ catedata[eq].children[i].id
						+ ' " onclick="tagFun('
						+ catedata[eq].children[i].id
						+','
						+" 'tag',"
						+ eq
						+" ,' " 
						+ keywd
						+" '," 
						+ pageNum
						+"," 
						+ sizeNum
						+"," 
						+ 1
						+" ) "
						+' " id="gzbg_'
						+ catedata[eq].children[i].id
						+' ">'
						+ catedata[eq].children[i].name
						+'</a>';
				}
				//tag拼接渲染
				$('#tagjsp').html(tagstr);
				
				//文章list区域：拼接渲染
				var str = '';
				for(var i=0;i<group.length;i++){
					var imgurl = group[i].thumbnail;
					if(imgurl != ''){
						str += '<li class="mui-table-view-cell mui-media line">'
								+'<a href="http://192.168.0.109:8080/cmsarticle/'+'1/' + id + '/'  + group[i].content_id+'.html">'
								+'<img class="mui-media-object mui-pull-left scyl-img" src="'
								+'http://192.168.0.109:8081/ofcms-admin'+imgurl
								+'">'
								+'<div class="mui-media-body">'
								+'<p class="scyl-title">'
								+group[i].title_name+'</p>'
								+'<p class="scyl-uptime">'+getLocalTime(group[i].create_time)+'</p>'
								+'</div></a>'
								+'</li>';
					} else {
						str += '<li class="mui-table-view-cell mui-media line">'
								+'<a href="http://192.168.0.109:8080/cmsarticle/'+'1/' + id + '/'  + group[i].content_id+'.html">'
								+'<img class="mui-media-object mui-pull-left scyl-img" src="static.docs.v1.1/images/scyl_2/default.jpg">'
								+'<div class="mui-media-body">'
								+'<p class="scyl-title">'
								+group[i].title_name+'</p>'
								+'<p class="scyl-uptime">'+getLocalTime(group[i].create_time)+'</p>'
								+'</div></a>'
								+'</li>';
					}
						
						
				}
				//增加查看全部
				if(group.length == 0){
					str="";
					str += '<li class="article-a-li-more">'
							+'<a class="mui-badge a-more">暂无数据</a>'
							+'</li>';
				} else {
					
				}			
							
				str = '<ul class="mui-table-view bfnone">'
					+str 
					+'</ul>';
				//list拼接渲染
				$('#article-ul').html(str);
				
				//覆写上一页下一页
				var pagestr = '';
				var prePage = data.prePage;
					hasNextPage = data.hasNextPage,
					nextPage = data.nextPage,
					hasPrePage = data.hasPrePage;
				thisid = data.id;
				console.log("::"+prePage+hasNextPage+nextPage+hasPrePage+thisid)
				
				//当前页码
				var thisPage = prePage+1;
				
				if(hasPrePage==false && hasNextPage==true){ //没有上一页
					pagestr += '<!--分页-->'
						+'<div class="mui-content-padded mgtb0">'
						+'<ul class="mui-pager">'
						+'<li class="on"><a>'+thisPage+'</a></li>'
						+'<li class="bd0"><a onclick="nextPageFun('
						+	thisid+','+nextPage+','+sizeNum+','+1
						+')">下一页</a></li>'
						+'</ul>'
						+'</div>'					
				}
				if (hasPrePage==true && hasNextPage==false){ //沒有下一頁
					pagestr += '<!--分页-->'
						+'<div class="mui-content-padded mgtb0">'
						+'<ul class="mui-pager">'
						+'<li class="bd0"><a onclick="prePageFun('
						+	thisid+','+prePage+','+sizeNum+','+1
						+')">上一页</a></li>'
						+'<li class="on"><a>'+thisPage+'</a></li>'
						+'</ul>'
						+'</div>'
				} 
				if (hasPrePage==true && hasNextPage==true) { //有上下翻页
					pagestr += '<!--分页-->'
						+'<div class="mui-content-padded mgtb0">'
						+'<ul class="mui-pager">'
						+'<li class="bd0"><a onclick="prePageFun('
						+	thisid+','+prePage+','+sizeNum+','+1
						+')">上一页</a></li>'
						+'<li class="on"><a>'+thisPage+'</a></li>'
						+'<li class="bd0"><a onclick="nextPageFun('
						+	thisid+','+nextPage+','+sizeNum
						+')">下一页</a></li>'
						+'</ul>' 
						+'</div>'
				}
				//统一渲染赋值
				$("#fixedpage").html(pagestr);
				
				
				
				
			}
		}
	});
	
	//标签
	
    $.ajax({ 
        type:"get", //提交方式
        data:{ "id" : id,"keyWord": keywd,"page":pageNum,"size":sizeNum}, //查询的参数
        url: tagurl, //提交的路径
        dataType:"json", //返回的类型  是Text文本
        success:function(data){
	        if(data==0) {
	            console.log("不可以使用");
	        }else{
		        //console.log("可以使用tag：categoryFun");
	            //获取需要的数据
		        var group = data.data[0].children;
//	        		alert(group)
		        //拼接字符串
			    var str2='';
			    //对数据做遍历，拼接到页面显示
			    
		        for(var i=0;i<group.length;i++){
		         	if(group[i].id==id){
		         		str2 += '<a class="mui-control-item navli mui-active" onclick="categoryFun(' 
					        + group[i].id
					        +','
					        + " 'category',"
					        + i
							+" ,' " 
							+ keywd
							+" '," 
							+ pageNum
							+"," 
							+ sizeNum
							+" ) "
					        +' " id="category_'
					        + group[i].id
					        +' ">'
					        + group[i].name
					        +'</a>';
		         	} else {
		         		str2 += '<a class="mui-control-item navli" onclick="categoryFun(' 
					        + group[i].id
					        +','
					        + " 'category',"
					        + i
							+" ,' " 
							+ keywd
							+" '," 
							+ pageNum
							+"," 
							+ sizeNum
							+" ) "
					        +' " id="category_'
					        + group[i].id
					        +' ">'
					        + group[i].name
					        +'</a>';
		         	}
		         	
		        }
		         //放入页面的容器显示
		        $('#segmentedControl').html(str2);
	        }
	    }
    });
}


function tagFun(id,type,eq,keyword,pageNum,sizeNum){
	tagtype =  type;
	keywd = keyword;
	if(id != thisid){ //如果切换一级栏目
		console.log(id+"///"+thisid)
		pageNum =1;
	}
	//标签
	$.ajax({ 
		type:"get", //提交方式
		data:{ "id" : id,"keyWord": keywd,"page":pageNum,"size":sizeNum}, //查询的参数
		url: articleurl, //提交的路径
		dataType:"json", //返回的类型  是Text文本
		success:function(data){
			if(data==0) {
				console.log("不可以使用");
			}else{
			    console.log("可以使用tagFunyyyyyy");
				//获取需要的数据
				var group = data.data;
				console.log(data);
		        console.log(group[0].content_id)
		        //文章list区域：拼接渲染
				var str = '';
				for(var i=0;i<group.length;i++){
					var imgurl = group[i].thumbnail;
					if(imgurl != ''){
						str += '<li class="mui-table-view-cell mui-media line">'
								+'<a href="http://192.168.0.109:8080/cmsarticle/'+'1/' + id + '/'  + group[i].content_id+'.html">'
								+'<img class="mui-media-object mui-pull-left scyl-img" src="'
								+'http://192.168.0.109:8081/ofcms-admin'+imgurl
								+'">'
								+'<div class="mui-media-body">'
								+'<p class="scyl-title">'
								+group[i].title_name+'</p>'
								+'<p class="scyl-uptime">'+getLocalTime(group[i].create_time)+'</p>'
								+'</div></a>'
								+'</li>';
					} else {
						str += '<li class="mui-table-view-cell mui-media line">'
								+'<a href="http://192.168.0.109:8080/cmsarticle/'+'1/' + id + '/'  + group[i].content_id+'.html">'
								+'<img class="mui-media-object mui-pull-left scyl-img" src="static.docs.v1.1/images/scyl_2/default.jpg">'
								+'<div class="mui-media-body">'
								+'<p class="scyl-title">'
								+group[i].title_name+'</p>'
								+'<p class="scyl-uptime">'+getLocalTime(group[i].create_time)+'</p>'
								+'</div></a>'
								+'</li>';
					}
				}			
				//增加查看全部
				if(group.length == 0){
					str="";
					str += '<li class="article-a-li-more">'
							+'<a class="mui-badge a-more">暂无数据</a>'
							+'</li>';
				} else {
//					str += '<li class="article-a-li-more">'
//							+'<a class="mui-badge a-more" href="">查看全部</a>'
//							+'</li>';
				}	
				str = '<ul class="mui-table-view bfnone">'
					+str 
					+'</ul>';
				//list拼接渲染
				$('#article-ul').html(str);
				
				console.log(id)
				$(".gzbg").removeClass("on");
				$(".gzbg_"+id).addClass("on");	
				
				//覆写上一页下一页
				var pagestr = '';
				var prePage = data.prePage;
					hasNextPage = data.hasNextPage,
					nextPage = data.nextPage,
					hasPrePage = data.hasPrePage;
				thisid = data.id;
				console.log("::"+prePage+hasNextPage+nextPage+hasPrePage+thisid)
				
				//当前页码
				var thisPage = prePage+1;
				
				if(hasPrePage==false && hasNextPage==true){ //没有上一页
					console.log("ooookkkrrr")
					pagestr += '<!--分页-->'
						+'<div class="mui-content-padded mgtb0">'
						+'<ul class="mui-pager">'
						+'<li class="on"><a>'+thisPage+'</a></li>'
						+'<li class="bd0"><a onclick="nextPageFun('
						+	thisid+','+nextPage+','+sizeNum +','+2
						+')">下一页</a></li>'
						+'</ul>'
						+'</div>'
				}
				if (hasPrePage==true && hasNextPage==false){ //沒有下一頁
					pagestr += '<!--分页-->'
						+'<div class="mui-content-padded mgtb0">'
						+'<ul class="mui-pager">'
						+'<li class="bd0"><a onclick="prePageFun('
						+	thisid+','+prePage+','+sizeNum+','+2
						+')">上一页</a></li>'
						+'<li class="on"><a>'+thisPage+'</a></li>'
						+'</ul>'
						+'</div>'
				} 
				if (hasPrePage==true && hasNextPage==true) { //有上下翻页
					pagestr += '<!--分页-->'
						+'<div class="mui-content-padded mgtb0">'
						+'<ul class="mui-pager">'
						+'<li class="bd0"><a onclick="prePageFun('
						+	thisid+','+prePage+','+sizeNum+','+2
						+')">上一页</a></li>'
						+'<li class="on"><a>'+thisPage+'</a></li>'
						+'<li class="bd0"><a onclick="nextPageFun('
						+	thisid+','+nextPage+','+sizeNum+','+2
						+')">下一页</a></li>'
						+'</ul>' 
						+'</div>'
				}
				//统一渲染赋值
				$("#fixedpage").html(pagestr);
			}
		}
	});
}
//转换日期格式
function getLocalTime(nS) {
	return new Date(parseInt(nS) ).toLocaleString().replace(/:\d{1,2}$/,' ');

}
</script>
</body>
</html>

以上就是关于“ Ajax异步请求（重渲染DOM元素时，如何自动调用并执行JS自定义函数【含代码】）- 案例篇 ” 的全部内容。

草巾冒小子
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM破坏及复现实验
lml_0916的博客
08-01 436
这个也是，onerror替代了src排的第一个的位置，它就变成了第一个，但是我在刚刚循环的时候，已经把第一个给循环了，我要去循环下一个的时候它没有了，所以我就结束循环了。就是将src元素写道第2为，在删除第一位的时候它变成第一位就会保留了，然后将onerror保存到第四位，那样在删除第一位后，原来的第三位变成了第二位，第四位就变成了第三位，，第二位运行完后被删除，最开使的第四位就变成了第2位，但是我们已经执行完第二位了，所以后面就没有了，他就跳出了循环。可以看到它第一个返回的是area，另一个是a标签。..
Vue 如何在页面渲染完后去操作dom，而且只执行一次
热门推荐
Corey
07-17 1万+
在接口请求成功的回调里使用 this.$nextTick(() =&gt;{ // 在这里面去获取DOM })。 在mounted生命周期，组件挂载成功，但还未渲染，自然获取不到相关的DOM节点。看你资料好像不是前端，举个更简单的例子，你在html中，把 console.log(document.querySelector('body'))写在body标签前面，代码执行时机先于页面渲染，...
浏览器章节详解（多文章搬运总结）
qq_53555672的博客
05-19 516
搬运：细说浏览器输入URL后发生了什么 - 掘金 (juejin.cn) 浏览器详解 1.浏览器输入URL时候发生了什么？ [1]地址解析:检验输入url的合法性（正则检验*），看输入的是url还是搜索内容，然后通过浏览器默认搜索引擎的服务器查找进行地址转换url查询。 [2]DNS域名解析,涉及到了计网的相关知识点。 在客户端输入 URL 后，会有一个递归查找的过程，从浏览器缓存中查找->本地的hosts文件查找->找本地DNS解析器缓存查找->本地DNS服务器查找，这个过程中任何一步
DOM渲染与优化 - CSS、JS、DOM解析和渲染阻塞问题
最新发布
好好学习天天向上
09-08 4332
知识点对于浏览器说，页面加载主要有两个事件浏览器向服务器请求到了 HTML 文档后便开始解析，产物是 DOM（文档对象模型），到这里 HTML 文档就被加载和解析完成了。 HTML文件的解析就是生成DOM树的过程HTML中的三类script 渲染进程在解析 HTML 的时候，如果遇到一个没有任何属性的 标签，就会暂停解析，先发送网络请求获取该 JS 脚本的代码内容，然后让 JS 引擎执行该代码，当代码执行完成后再切换回渲染引擎继续渲染流程。 async、defer属性的js脚本，渲染引擎遇到这一行命令，
ajax请求会阻塞dom,Jquery ajax 同步阻塞引起的UI线程阻塞问题_jquery
weixin_33259400的博客
08-05 463
最近做一个项目，遇到了一个问题同步ajax引起的ui线程阻塞问题，下面把我的问题解决过程分享给大家。事情起因是这样的，因为页面上有多个相似的异步请求动作，本着提高代码可重用性的原则，我封装了一个名为getData的函数，它接收不同参数，只负责获取数据，然后把数据return。基本的逻辑剥离出来是这样的：function getData1(){var result;$.ajax({url : "p....
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
12-11
在本例中，它被用来处理AJAX请求和DOM元素操作。 3. **DataTable**：DataTable是jQuery的一个插件，它提供了高级的表格功能，如排序、搜索、分页等。它还支持通过Ajax获取数据并动态渲染表格。 接下来，我们详细...
VUE DOM加载后执行自定义事件的方法
12-10
在Vue.js应用中，我们经常需要在DOM加载后执行某些自定义事件，特别是在涉及到第三方库或者需要手动操作DOM的情况下。本篇文章将详细讲解如何在Vue中处理这种情况，以解决题目中遇到的问题。 首先，Vue.js提供了...
Ajax 动态载入html页面后不能执行其中的js快速解决方法
10-18
在Web开发中，Ajax（Asynchronous JavaScript and XML）技术常用于实现页面的异步更新，提升用户体验。然而，一个常见的问题是在使用Ajax动态载入HTML页面后，其中的JavaScript代码可能无法正常执行。这是因为默认...
jquery利用ajax调用后台方法实例
12-08
`callback`函数是当请求成功时执行的回调函数，参数`r`包含了服务器返回的数据。 **JavaScript部分：** ```javascript for (var i = 0; i ; i++) { // 遍历后台返回的数据r，创建HTML元素 } ``` 这部分代码展示...
通用AJAX：为每个服务器调用编写AJAX吗？
02-02
在Web开发中，AJAX（Asynchronous JavaScript and XML）是一种创建动态网页的技术，它允许页面在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。AJAX的核心是利用JavaScript来实现异步数据交互，这...
JS监听不到被操作后dom的事件,js动态生成的DOM绑定事件失效,解决方案
橙-极纪元-cplvfx-JJY.Cheng
08-26 1218
第一步：首先在文档加载完时，声明一个Reload函数，在函数里写监听动作； 第二步：在函数下面，直接执行一遍该函数； 第三步：在Ajax请求结束后，执行一遍该函数，就可以做到完全监听了； $(document).ready(function(){ Reload= function () { $("p").on("click", function () { //执行一些动作 }) } //载入监听 Reload(); //ajax请求 $.post("url", { data: da
dom加载完再执行 vue_VUE DOM加载后执行自定义事件的方法
weixin_39593498的博客
12-19 2436
最近想用vue做一个小东西，谁知道一开始就遇到了一个棘手的问题：首先我想在页面加载前通过ajax请求页面展示所需要的信息，于是我在created钩子函数里面请求了我想要的数据created:function(){var url="/indexitem";var _self=this;$.get(url,function(data){_self.items=data;});$.get('/banne...
DOM事件机制
li_chun_can的博客
09-08 174
事件是由三部分组成：事件源、事件类型、事件处理程序 1.事件源：事件被触发的对象 -->按钮对象 2.事件类型：如何触发？触发什么事件？例如鼠标点击，键盘按下等… 3.事件处理程序：通过一个函数赋值的方式 执行事件的步骤： 1.获取事件源 2.注册事件（绑定事件） 3.采用函数赋值形式添加事件处理程序 事件流 事件流描述了页面接收事件的顺序，事件流分为 3 个阶段：事件捕获、到达目标和事件冒泡。 事件冒泡（IE事件流） <!DOCTYPE html> <html lan.
dom渲染完毕再渲染数据_vue中实现先请求数据再渲染dom分享
weixin_39618956的博客
12-22 1095
在项目中遇到了一个问题，下面是vue template中的代码：我之前的写法是这样做的结果是下面取dom的操作，取到的dom都是undefined，也就是没有取到。原因是并没有按照 请求数据—>渲染dom—>获取dom的顺序执行，实际的执行顺序是 先获取dom，而此时数组option中还是空的，上面的v-for循环也就没有渲染出dom，所以根本取不到(不理解是为什么)后来我又把请求数据...
回流与重绘
JerryQuery的博客
09-30 623
回流与重绘 一、概念 回流： 当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）。 引发回流的操作： 1.修改dom元素。当一个DOM元素的几何属性发生变化时，所有和它相关的节点（比如父子节点、兄弟节点等）的几何属性都需要进行重新计算。 2.页面首次渲染 3.浏览器窗口大小发生改变 4.元素的尺寸...
关于 JS 与 CSS 是否阻塞 DOM 的渲染和解析
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
06-23 260
点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群最近系统梳理HTML5所有涉及到的标签时，梳理至<link>和<script>标签时，碰巧想...
数据过多/DOM操作导致页面卡顿和请求突增导致页面崩溃
SpringRolls的博客
06-11 7971
数据过多导致页面卡顿 采用懒加载+分页(前端维护懒加载的数据分发和分页) 使用虚拟滚动技术(目前react的antd4.0已支持虚拟滚动的select长列表) 请求突增导致页面崩溃
ajax请求会阻塞dom,分享一个发送ajax请求的dom
weixin_39943678的博客
08-05 253
None CMS v1.0index.php:$dir=dir("./");$times=array();while($file=$dir->read()){//echo $file."";if($file!='index.php'&&$file!='.'&&$file!='..'&&$file!='ctrl')$times[filemtime...
ajax所有请求完毕后后再执行函数操作
qq_22594791的博客
02-07 405
$.when( /** * 今日注册用户数 */ $.get("/user/register/count/today", ...
Vue.js入门与实践：从基础到异步请求
Vue实例的生命周期包含多个钩子函数，例如beforeCreate、created、beforeMount、mounted等，这些钩子在实例的不同阶段被调用，使得开发者可以在特定时刻执行代码。 Vue.js的指令系统如v-if、v-for、v-bind和v-on等...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值