php+template.js异步请求数据

3651

引入:template.js

请求数据方法:

<script type="text/javascript">
    $(function() {
        /*瀑布流*/
        var page = 2;
        var loading = false;
        $(window).scroll(function() {
            if ($(document).height() - $(this).scrollTop() - $(this).height() < 100) {
                loadMore();
            }
        });

        function loadMore() {
            if (loading === false) {
                loading = true;
                $(".loadmore").show();
                $.get("/pc_ajax_data", {catid: {$catid}, page: page}, function(list) {
                    if (list.status) {
                        page++;
                        $("#J_load_content").append(template("storyTemplate", {list: list.data}));
                        loading = false;
                        $(".loadmore").css('display', 'none !important');
                    } else {
                        $(".loadmore").text("没有更多了");
                    }
                }, 'json');
            } else {
                return;
            }
        }
    });
</script>

遍历数据:

<script id='storyTemplate' type="text/html">
	{{each list as value key}}
	<li><a href="{{value.url}}" title="{{value.title}}"><img width="289" height="{{value.height}}" src="{{value.thumb}}" alt="{{value.title}}">
		<h5>{{value.title}}</h5>
		<p>{{value.subtitle}}</p>
		<span class="ico-detail"><i class="uzicofont uzico-shipin1"></i></span>
	</a>
	</li>
	{{/each}}
</script>