使用template-web.js

使用template-web.js

template-web.js,免費使用無需使用幣.

簡單使用:

查詢天氣

<div>
    <p id="cityname">城市名稱：</p>
    <ul id="weather">
        <li>
            <p class="date">20日星期五</p>
            <p class="high">高溫 25℃</p>
            <p class="low">低溫 14℃</p>
            <p class="type">晴天</p>
        </li>
        <li>
            <p class="date">日期</p>
            <p class="high">高溫 25℃</p>
            <p class="low">低溫 14℃</p>
            <p class="type">晴天</p>
        </li>
        <li>
            <p class="date">日期</p>
            <p class="high">高溫 25℃</p>
            <p class="low">低溫 14℃</p>
            <p class="type">晴天</p>
        </li>
        <li>
            <p class="date">日期</p>
            <p class="high">高溫 25℃</p>
            <p class="low">低溫 14℃</p>
            <p class="type">晴天</p>
        </li>
        <li>
            <p class="date">日期</p>
            <p class="high">高溫 25℃</p>
            <p class="low">低溫 14℃</p>
            <p class="type">晴天</p>
        </li>
    </ul>
</div>

<script src="../jquery-1.12.4.js"></script>
<!-- 導入模板引擎js文件 -->
<script src="../template-web.js"></script>
<!-- 準備一個模板 -->
<script id="tmp_weater" type="text/html">
    {{each data.forecast}}
    <li>
        <p class="date">{{$value.date}}</p>
        <p class="high">{{$value.high}}</p>
        <p class="low">{{$value.low}}</p>
        <p class="type">{{$value.type}}</p>
    </li>
    {{/each}}
</script>
<script>
    // 入口函數
    $(function () {
        // 1.給查詢天氣按鈕設置一個點擊事件.
        $('#btn').on('click', function () {
            // 2.獲取文本框中輸入的城市名.
            var cityName = $('#city').val().trim();
            // 3.把城市名顯示在class爲cityname的標籤上.
            $('#cityname').text('城市名稱：' + cityName);
            // 4.發送ajax請求,獲取天氣數據
            $.ajax({
                url: 'http://wthrcdn.etouch.cn/weather_mini',
                data: {
                    city: cityName
                },
                dataType: 'json',
                success: function (backData) {
                    console.log(backData);
                    // 5.使用模板引擎吧返回來的天氣數據 顯示在頁面上
                    var resHtml = template('tmp_weater', backData);
                    //把返回的這個帶有標籤的字符串.交給ul的html
                    $('#weather').html(resHtml);
                }
            });
        });
    })
</script>

### 下載地址