zoukankan      html  css  js  c++  java
  • JavaScript templating engine(一个好的JS模板引擎)

    地址: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(){}
    }

     

  • 相关阅读:
    ORA00257 archiver error. 错误的处理方法
    Eclipse快捷键大全
    struts2 globalresults
    oracle创建表空间
    struts2 action中result参数详解
    struts2小程序登录验证
    清理系统垃圾文件 请命名为:*.bat
    网上免费阅读的计算机编程书籍列表
    eclipse+myeclipse+mysql+tomcat配置数据源
    o(∩_∩)o...哈哈 somethingaboutJAVA
  • 原文地址:https://www.cnblogs.com/bingbing/p/3171503.html
Copyright © 2011-2022 走看看