arttemplate两种用法

2016-11-18 19:24:09来源:CSDN作者:sinat_36146776人点击

第七城市

标准讲解链接:http://www.jq22.com/jquery-info1097

用法一、放在script标签里面

<script src="jquery-1.11.2.js"></script><script src="template.js"></script><script id=""artid type="text/html">{{if longitude}}    <ul>    	<li>经度:{{longitude}}</li>    	<li>纬度:{{latitude}}</li>    	<li>海拔高度:{{altitude}}</li>    	<li>天气:{{weather}}</li>    	<li>温度:{{temp}}</li>    	<li>最低温度:{{l_temp}}</li>    	<li>最高温度:{{h_temp}}</li>		<li>风向:{{WD}}</li>		<li>风速:{{WS}}</li>		<li>日出时间:{{sunrise}}</li>		<li>日落时间:{{sunset}}</li>    </ul>{{/if}}</script>
用法二、放在函数内部

	function queryCitycode(cityCode){    	$.ajax({			type : "get",			url : './weather.php',			dataType : "json",			data:{cityCode:cityCode},			success:function(data){				var tag='{{if longitude}}'				    +'<ul>'				    	+'<li>经度:{{longitude}}</li>'				    	+'<li>纬度:{{latitude}}</li>'				    	+'<li>海拔高度:{{altitude}}</li'>				    	+'<li>天气:{{weather}}</li>'				    	+'<li>温度:{{temp}}</li>'				    	+'<li>最低温度:{{l_temp}}</li>'				    	+'<li>最高温度:{{h_temp}}</li>'				    	+'<li>风向:{{WD}}</li>'				    	+'<li>风速:{{WS}}</li>'				    	+'<li>日出时间:{{sunrise}}</li>'				    	+'<li>日落时间:{{sunset}}</li>'				    +'</ul>'				+'{{/if}}';				var render=template.compile(tag);				var html=render(data.retData);				$('#weaInfo').html(html);			},error:function(){			    console.log('fail');			}		});    }

最老式的写法,不利于维护和修改

    function queryCitycode(cityCode){    	$.ajax({			type : "get",			url : './weather.php',			dataType : "json",			data:{cityCode:cityCode},			success : function(data){				var wea = data.retData;				//解析天气内容				var tag = '';				tag += '<li>经度:' +wea.longitude+ '</li>';				tag += '<li>维度:' +wea.latitude+ '</li>';				tag += '<li>海拔高度:' +wea.altitude+ '</li>';				tag += '<li>天气:' +wea.weather+ '</li>';				tag += '<li>温度:' +wea.temp+ '</li>';				tag += '<li>最高温度:' +wea.h_tmp+ '</li>';				tag += '<li>最低温度:' +wea.l_tmp+ '</li>';				tag += '<li>风向:' +wea.WD+ '</li>';				tag += '<li>风速:' +wea.WS+ '</li>';				tag += '<li>日出时间:' +wea.sunrise+ '</li>';				tag += '<li>日落时间:' +wea.sunset+ '</li>';				var info = $('<ul>').html(tag);				$('#weaInfo').html(info);			},error:function(){			    console.log('fail');			}		});    }

例子截屏:

需要从接口处获取的json数据解析后为:


html中怎样获取json中的数据呢







第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台