模板引擎template

最新推荐文章于 2024-04-06 11:09:13 发布

Binglili0809

最新推荐文章于 2024-04-06 11:09:13 发布

阅读量238

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/Binglili0809/article/details/108599648

版权

ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
  <h2>模板引擎的使用</h2>

</body>
</html>
<!-- 导入js   -->
<script src="./template-web.js"></script>
<!-- 定义模板 -->
<script type="html/text" id="template">
  <ul>
    <li>名字：{{name}}</li>
    <li>年龄：{{age}}</li>
    <li>性别：{{sex}}</li>
  </ul>
</script>

<script>
/*
    1.定义模板
    2.挖坑 -起名字
    3.填坑
*/
  //数据
  var data = {
    name: '李明',
    age: 18,
    sex: '男'
  };

  //填坑 template
  //参数1 模板ID
  //参数2 填充的数据
  var result = template('template', data);
  console.log(result);
</script>

调用数据库的数据

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>落网</title>

	<style type="text/css">
		.item {
			width: 640px;
			/* height: 452px; */
			background-color: #eee;
			margin-top: 50px;
			border-radius: 5px;
			overflow: hidden;
		}

		.item .cover {
			display: block;
		}

		.item .cover img {
			display: block;
		}

		.item .bottom {
			height: 35px;
			position: relative;
		}

		.item .bottom a {
			text-decoration: none;
			line-height: 35px;
			font-family: '微软雅黑';
			margin-left: 20px;
			color: gray;
		}

		.item .bottom .rightBox {
			position: absolute;
			top: 0px;
			right: 0px;
			height: 100%;
		}

		.item .bottom .rightBox span {
			line-height: 35px;
			margin: 0 20px;
			font-size: 15px;
			/* font-family: "微软雅黑"; */
			color: gray;
		}

		.item .bottom .rightBox span::before {
			margin-right: 10px;
			color: #dd5a64;
		}

		.left-control {
			position: fixed;
			right: 100px;
			top: 50%;
			transform: translateY(-50%);
		}

		#getMore {
			width: 100px;
			height: 100px;
			border: none;
			text-align: center;
			line-height: 100px;
			cursor: pointer;
		}

		#getSome {
			width: 100px;
			height: 100px;
			border: none;
			text-align: center;
			line-height: 100px;
			cursor: pointer;
		}
	</style>
	<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
</head>

<body>
	<div class="left-control">
		<h2>加载一张</h2>
		<div id='getMore' class="icon-download icon-4x"></div>
		<!--<div id='getMore' class="icon-spinner icon-spin icon-4x"></div>-->
		<h2>加载多张</h2>
		<div id='getSome' class="icon-download icon-4x"></div>
	</div>
	<div class="container">
		<div class="item">
			<a href="#" class='cover'><img src="images/vol.859.jpg" alt=""></a>
			<div class="bottom">
				<a href="#">vol.847 用一首歌来想象你</a>
				<div class='rightBox'>
					<span class='icon-heart'>18554</span>
					<span class='icon-comment'>292</span>
				</div>
			</div>
		</div>
	</div>
</body>
<!-- 引入JQ -->
<script src="./js/jquery-1.12.4.min.js"></script>

<!-- 引入模板引擎 -->
<script src="./js/template-web.js"></script>
<!-- 
	定义模板
	挖坑---起名字
	填坑
 -->
 <!-- 定义模板 -->
 <script type="text/html" id="template">
	<div class="item">
		<a href="#" class='cover'><img src="{{path}}" alt=""></a>
		<div class="bottom">
			<a href="#">{{name}}</a>
			<div class='rightBox'>
				<span class='icon-heart'>{{star}}</span>
				<span class='icon-comment'>{{message}}</span>
			</div>
		</div>
	</div>
</script>

<script>
	$(function(){
		//点击事件 加载一张
		$('#getMore').on('click',function(){
			//不刷新页面获取数据 --- ajax
			$.ajax({
				url: '_api/luowang.php',
				data: {
					index: Math.floor(Math.random() * 20)
				},//随机数
				success: function(data){
					console.log(data);
					//把返回的数据填坑到模板中
					var result = template('template', data.item);
					console.log(result);
					$('.container').append(result);
				}
				// dataType: 'json'  //设置返回的是json格式
			});
		});

		//加载多张 点击事件
		$('#getSome').on('click',function(){
			//不刷新页面获取数据  ajax
			$.ajax({
				url: '_api/luowang_getSome.php',
				data: {
					num: Math.floor((Math.random() * 5) + 1)
				},
				success: function(data){
					console.log(data);
					for(var i = 0; i < data.items.length; i++){
						var result = template('template', data.items[i]);
						$('.container').append(result);
					}
				}
			});
		});
	})
</script>

Binglili0809

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模板引擎template

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>title</title></head><body> <h2>模板引擎的使用</h2></body></html><script src="
复制链接

扫一扫