使用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>