AJAX页面传值后处理方式

时间：2021-09-18 07:54:45

　　之前在一个项目的时候，很多页面需要AJAX传值来渲染页面，每到这个时候，自己也觉得很头痛，因为每次渲染的时候，都使用的是把HTML代码拼接上去，一代代码量大了，很容易出错，还有就是没有易读性，在做完整个项目后，自己也觉得一定会有更好的办法，后来在一个朋友的帮助下，认识总算的到了一个他们使用的方案，让我豁然开朗，不一定是最优解，但是一定比使用HTML拼接更加容易维护更容易让人读懂。我把代码认真的读了几次，几乎把每一行都注释了，也写出了自己的疑问，希望大神解答。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript" src="jquery.js"></script>
  <title>Document</title>
 </head>
 <body>
 <!--非循环-->
		<div id="container" class="">
			<p>$[name]</p>
			<p>$[age]</p>
			<p>$[salary]</p>
		</div>
  <!--循环-->
         <!--模板 （不显示）-->
		 <div id="template" style="display:none">
			<div>
			$[name]<br/>
			$[title]
			</div>
		 </div>
		<div id="container1" class="">
			
		</div>
		<a id="more">点击加载更多</a>
 </body>
</html>
<script type="text/javascript">
	var json = {
		name:'test',
		age:15,
		salary:5500
	}
	//不循环绑定数据的话就直接指定容器
	replaceElementInnerText($('#container'),json)
	
	var json1 = {
		name : "这是循环的结果",
		title:"这是循环结果2"
	}
	$('#more').click(function(){
		var json2 = [{name:'name测试1',title:'title测试1'},{name:'name测试2',title:'title测试2'},{name:'name测试3',title:'title测试3'}]
	var temp = $('#template').children().prop('outerHTML');//获取template的子元素的HTML（包括自身）
	for(var i = 0;i <3;i++){//确定需要生成新模板的循环
		var $temp = $(temp);//把模板转换为JQ对象
        replaceElementInnerText($temp,json2[i]);
		$('#container1').append($temp);
	}
	
	})


//替换函数
function replaceElementInnerText (ele, data) {
            var $ele,innerHTML;//创建两个变量
            if(typeof ele == 'string'){//判断ele是否为对象还是字符串，是字符串就再次转换为对象
                $ele=$(ele);
                innerHTML=$ele.html();//然后调出此对象的HTML
            }else{//如果是对象
                $ele=(ele instanceof jQuery)?ele:$(ele);//就判断ele的实例对象是否为jq如果不是则转换为jq对象
                innerHTML=$ele.html();//得到此对象的HTML
            }
            var pattern=/\$\[(\w+\.*\w*)]/g;//正则式，根据自己规则来编写
            var replace_attr=[];//创建一个空数组，用来装即将匹配的文本
            var i=0;
            while(i++<100) {
                var result = pattern.exec(innerHTML);//把innerHTML放入正则式去搜索
                if (!result) {//如果搜索不到，循环结束
                    break;
                }
                replace_attr.push(result[1]);//把搜索到的文本添加到预先准备的数组里
            }
            for(var key in replace_attr){//给数组循环
                var replace=new RegExp('\\$\\['+replace_attr[key]+'\\]','g');//创建一个正则式
                if(replace_attr[key].indexOf(".")>0){//如果当前名字里有.去掉点，拆分为数组（注：这里自己感觉太累赘，可能我哪里没有想到）
                    var replace_attr_keys=replace_attr[key].split(".");
                    var replace_attr_str="data";//创建一个字符串，用于后面的拼接
                    if(!data[replace_attr_keys[0]]||typeof data[replace_attr_keys[0]]!=='object'){
                        continue;
                    }
                    for(var _key in replace_attr_keys){//循环拆分出来的数组
                        replace_attr_str+='[\''+replace_attr_keys[_key]+'\']';//拼接拆分猪来的数组
                    }
                    if(eval(replace_attr_str)!=null){
                        innerHTML=innerHTML.replace(replace,eval(replace_attr_str));//把值替换为后台服务器传值
                    }
                }else{
                    if(data[replace_attr[key]]!=null){
                        innerHTML=innerHTML.replace(replace,data[replace_attr[key]]);//把值替换
                    }
                }
            }
           $ele[0].innerHTML=innerHTML;
          /*  $ele.find('img[img-load="load"]').each(function () {
                var reg=new RegExp("(http|ftp|https):\/\/w*");
                if(reg.exec($(this).attr('_src'))){
                    $(this).attr("src",$(this).attr('_src'));
                }
            });图片替换原理相同，这里没有图片所以注释*/
            return $ele[0].outerHTML;//函数返回值
        }

　　再次感谢这位朋友，让我认识到前后端分离，框架，模块化管理。共勉！！

标签：

相关文章