您的位置:首页 > Web前端 > JavaScript

JavaScript templating engine(一个好的JS模板引擎)

2013-07-08 21:57 746 查看
地址:http://blueimp.github.io/JavaScript-Templates/

使用方式:

1、在客户端将模板文件引入

<script src="JS/tmpl.min.js"></script>


2、在客户端添加定义模板类型(o代表传入的json格式的数据)

<script type="text/x-tmpl" id="tmpl-demo">
<h3 style="color:red;">{%=o.Name%}</h3>
<h4>年龄:{%=o.Age%}</h4>
</script>


3、在客户端定义按钮(用来向服务端发送Ajax请求,获取JSON格式的数据)和数据显示区域

<div>
<input type="button" value="点击" id="theBtn" />
</div>
<div id="result">
</div>


4、按钮单击事件(用jquery处理)

<script type="text/javascript">
$(function () {
$("#theBtn").click(function () {
$.ajax({
type: "POST",
url: "Handler/temp.ashx",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
console.log(msg);
$("#result").html(tmpl("tmpl-demo", msg));
},
error: function () {
alert("An unexpected error has occurred during processing.");
}
});
});
});
</script>


5、在服务端添加Handler

public void ProcessRequest (HttpContext context) {
context.Response.AddHeader("Vary", "Accept");
try
{
if (context.Request["HTTP_ACCEPT"].Contains("application/json"))
context.Response.ContentType = "application/json";
else
context.Response.ContentType = "text/plain";
}
catch
{
context.Response.ContentType = "text/plain";
}

JavaScriptSerializer js = new JavaScriptSerializer();
js.MaxJsonLength = 41943040;

Customer theCustomer = new Customer();
theCustomer.Name = "息壤";
theCustomer.Age = 30;

var jsonObj = js.Serialize(theCustomer);
context.Response.Write(jsonObj);
}


6、定义Customer类

public class Customer
{
public string Name { get; set; }
public int Age { get; set; }
public Customer(){}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: