ajax+underscore渲染页面

最新推荐文章于 2024-08-07 23:30:48 发布

我是关小花

最新推荐文章于 2024-08-07 23:30:48 发布

阅读量183

点赞数

分类专栏： ajax underscore 文章标签： ajax

本文链接：https://blog.csdn.net/Gx0525_/article/details/103573562

版权

ajax 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

underscore

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>underscore配合Ajax读取数据</title>
	<style>
		*{margin: 0;padding: 0;}
		.box{width: 700px;margin:100px auto;text-align: center;
		}
		table{
			margin-top:10px;
			width: 700px;
			border:2px soild #ccc;
			text-align: center;
		}
		.h{background-color: skyblue;}
		tr{background-color:#ccc ;}
		td{padding: 6px;width: 100px;}
		h2{color:yellowgreen;}

	</style>
</head>
<body>
	<div class="box">
		<h2>underscore配合Ajax读取数据</h2>
		<table>
				<tr class="h">
					<td>学号</td>
					<td>姓名</td>
					<td>年龄</td>
					<td>性别</td>
				</tr>

		</table>
	</div>
	<script type="text/javascript" src="js/underscore.js"></script>
	<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
	<script type="text/html" id="tep">

			<tr>
					<td><%=sno%></td>
					<td><%=name%></td>
					<td><%=age%></td>
					<td><%=sex%></td>
			</tr>

	</script>

	<script type="text/javascript">

	$.get('student.json',function(data){

			var compile =_.template($('#tep').html());
			//上边的<%=%>是模板语法，没有为什么，学过jsp的应该熟悉这个模板标记，一样的
			//模板语法，没有为什么 _ 是underscore向外暴露的对象，直接打点调用对应函数（_.template）

			$.each(data.result,function(index,obj){
				//填充数据字典
				 dic={
				 	sno:obj.sno,
				 	name:obj.name,
				 	age:obj.age,
				 	sex:obj.sex
				 };

				 	$('table').append(compile(dic));

			})


	})

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

或者

var templateStr1 = $("#feed_template1").html();
var compiled1 = _.template(templateStr1);
var templateStr2 = $("#feed_template2").html();
var compiled2 = _.template(templateStr2);
  var pageNav = null;
  
  getStudent(1,1);

  //请求页面
  function getStudent(php,pageNumber){
    $.get("php/" + php + ".php?page=" + pageNumber + "&pagesize=50", function (data) {
    //转为对象
      var dataobj = typeof data == "object" ? data : eval("(" + data + ")");
    //数组
      var list = dataobj.result;
    //计算总页数
    var pageAmount = Math.ceil(dataobj.count / 5);
    //删除之前的所有tr
    
    //遍历字典，组建DOM上树
      _.each(list, function (dictionary) {
        if (dictionary.type == 1) {
          var str1 = compiled1(dictionary);
          $(str1).appendTo(".connect");
        } else if(dictionary.type == 2){
          var str2 = compiled2(dictionary);
          $(str2).appendTo(".connect");
        }
      });
    $('img.lazy').lazyload({
        placeholder:"images/placeholder.png"
    });

   });
  };
var a = 0;
$(".tab li").click(function(){
  a = $(this).index();
  console.log(a)
  $(".connect").html("");
  getStudent($(this).index()+1,1);
});

我是关小花

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax+underscore渲染页面

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>underscore配合Ajax读取数据</title> <style> *{margin: 0;padding: 0;} .box{width: 700px...
复制链接

扫一扫

专栏目录