artTemplate的簡單用法

時間 2019-11-06

標籤 arttemplate 簡單用法简体版

原文原文鏈接

在實際開發中，咱們會使用模板引擎來提升開發效率。而衆多的模板引擎中，artTemplate不管就速度，兼容性仍是使用人數上，都佔絕對優點。這裏我將簡單地介紹下artTemplate的常見用法。javascript

須要先使用一個type="text/html"的script標籤存放模板css

1.簡單的json數據

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/template.js" ></script>
    </head>
    <body>
        <div id="container"></div>
        <script type="text/html" id="div">
            <h1>{{name}}</h1>
            <h2>{{age}}</h2>
        </script>
        <script type="text/javascript">
            var data = {
                name:"geekWeb",
                age:22
            }
            var html = template('div',data);
            document.getElementById("container").innerHTML = html;
        </script>
    </body>
</html>

2.帶數組的json數據

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/template.js" ></script>
    </head>
    <body>
        <div id="container"></div>
        <script type="text/html" id="div">
            <h1>{{name}}</h1>
            <ul>
                {{each lang as value i}}
                <li>語言{{i+1}}:{{value}}</li>
                {{/each}}
            </ul>
        </script>
        <script type="text/javascript">
            var data = {
                name:"前端語言",
                lang:['html','css','js']
            }
            var html = template('div',data);
            document.getElementById("container").innerHTML = html;
        </script>
    </body>
</html>

3.數組中包含對象的json數據

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/template.js" ></script>
    </head>
    <body>
        <div id="container"></div>
        <script type="text/html" id="div">
            <h1>{{name}}</h1>
            <ul>
                {{each lang}}
                <li>語言:{{$value.title}} 定義:{{$value.add}}</li>
                {{/each}}
            </ul>
        </script>
        <script type="text/javascript">
            var data = {
                name:"前端語言",
                lang:[{
                    title:"html",
                    add:"超文本標記語言"
                },{
                    title:"css",
                    add:"層疊樣式表"
                },{
                    title:"javaScript",
                    add:"添加動態特效"
                }]
            }
            var html = template('div',data);
            document.getElementById("container").innerHTML = html;
        </script>
    </body>
</html>

一個ajax+artTemplate+servlet+fastjson的綜合小實例

前臺：html

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script src="template.js"></script>
    <script>
      //建立一個XMLHttpRequest類型的對象ajaxReq
      var ajaxReq = new XMLHttpRequest();
      window.onload = function() {
        //用ajaxReq打開一個鏈接
        ajaxReq.open("get","ajax.do",true);
        //發送請求給服務器
        ajaxReq.send(null);
        //設置一個回調函數，用來處理服務器的迴應。
        ajaxReq.onreadystatechange = onReceive;
      }

      function onReceive() {
        if (ajaxReq.readyState === 4) {
          if (ajaxReq.status === 200) {
            //響應成功,作一些事情
            var jsonObj = JSON.parse(ajaxReq.responseText);//不要忘記將json字符串轉化爲json對象
            var html = template('test', jsonObj);
            document.getElementById('content').innerHTML = html;
          } else {
            //響應失敗,作一些事情
          }
        }
      };
    </script>
  </head>
  <body>
  <div id="content"></div>

  <script id="test" type="text/html">
    <table>
      <thead>
      <td>姓名</td>
      <td>年齡</td>
      </thead>
      {{each list as value i}}
      <tr>
        <td>{{value.name}}</td>
        <td>{{value.age}}</td>
      </tr>
      {{/each}}
    </table>
  </script>
  </body>
</html>

後臺：前端

public class Person {
    public String name;
    public int    age;
}

public class Persons {
    private List<Person> list;

    public List<Person> getList() {
        return list;
    }

    public void setList(List<Person> list) {
        this.list = list;
    }
}

import com.alibaba.fastjson.JSON;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

/**
 * Created by ttc on 17-5-26.
 */
@WebServlet(name = "Servlet",urlPatterns = "/ajax.do")
public class Servlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Person person = new Person();
        person.name = "huochai";
        person.age = 29;

        String strJson = JSON.toJSONString(person);
        System.out.println(strJson);

        Person person2 = new Person();
        person2.name = "huochai2";
        person2.age = 292;

        List<Person> lst = new ArrayList<Person>();
        lst.add(person);
        lst.add(person2);

        Persons persons = new Persons();
        persons.setList(lst);

        String strJson2 = JSON.toJSONString(persons);
        System.out.println(strJson2);

        PrintWriter pw = response.getWriter();
        pw.println(strJson2);
    }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。