遨翔在知識的海洋裡----(apicloud之dot模板渲染資料)

遨翔在知識的海洋裡發表於2018-04-10
APICloud

說明

陣列，物件，圖片，if,else if, else 判斷

本地

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>開發</title>
	<link rel="stylesheet" type="text/css" href="../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../css/style.css" />
	<style>
		.empty {
			text-align: center;
			padding: 120px 0;
		}
	</style>
</head>

<body>
	<div class="empty">本地</div>
	<div id="test"></div>
	<script id="testTemplate" type="text/x-dot-template">
		<img src="{{= it.img}}" alt="ing">
		<div><span>{{= it.code}}</span>--<span>{{= it.msg}}</span></div>
		{{~it.data:value:index}}
		//{{~it:value:index}}
			<div>
				{{= index+1}}--{{= value.id}}--{{= value.username}}--{{= value.password}}--
					{{? value.role === "admin"}}
						我是管理員--
					{{?? value.role === "user"}}
						 我是使用者--
					{{??}}
						不是使用者也不是管理員--
					{{?}}
				{{= value.create_time}}
			<div>
		{{~}}
	</script>
</body>

</html>
<script type="text/javascript" src="../script/api.js"></script>
<script src="https://cdn.bootcss.com/dot/1.1.2/doT.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
	apiready = function() {
		test()
	}

	function test() {
		var ret = {
			"img": "../image/bottombtn0102.png",
			"code": 1,
			"msg": "所有使用者",
			"data": [{
				"id": 1,
				"username": "1",
				"password": "a",
				"role": "admin",
				"create_time": "2018-04-04T07:21:31.000Z"
			}, {
				"id": 2,
				"username": "2",
				"password": "b",
				"role": "user",
				"create_time": "2018-04-04T07:23:24.000Z"
			}, {
				"id": 3,
				"username": "3",
				"password": "c",
				"role": "jie",
				"create_time": "2018-04-04T07:23:24.000Z"
			}]
		}
		var testTemplate = doT.template($("#testTemplate").text());
		$("#test").html(testTemplate(ret));
		// $("#test").html(testTemplate(ret.data));
	}
</script>



複製程式碼

ajax

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div id="test"></div>
    <script id="testTemplate" type="text/x-dot-template">
        <div><span>{{= it.code}}</span>--<span>{{= it.msg}}</span></div>
        {{~it.data:value:index}}
        <div>{{= it.code }},<span>{{= index+1}}<span>{{= value.id}}--<span>{{= value.username}}--{{= value.password}}--{{= value.role}}--{{= value.create_time}}<span><div>
        {{~}}
    </script>
</body>

</html>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/dot/1.1.2/doT.js"></script>
<script>
    var result = {"code":1,"msg":"所有使用者","data":[{"id":1,"username":"1","password":"a","role":"admin","create_time":"2018-04-04T07:21:31.000Z"},{"id":2,"username":"2","password":"b","role":"user","create_time":"2018-04-04T07:23:24.000Z"}]}
    $.ajax({
        url: 'http://localhost:3000/userfindAll',
        type: 'get',
        success: function(result){
            console.log(result)
            var testTemplate = doT.template($("#testTemplate").text());
            $("#test").html(testTemplate(result));
        },
        error: function(error){
            console.log(error)
        }
    })
</script>
複製程式碼

相關文章