jqAjax点击加载

最新推荐文章于 2023-11-20 21:35:13 发布

xcj888it

最新推荐文章于 2023-11-20 21:35:13 发布

阅读量472

点赞数

分类专栏： jq 文章标签： ajax

本文链接：https://blog.csdn.net/xcj888it/article/details/80688797

版权

jq 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajaxpagination</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Ajax电影类目</h2>

<div class="container">
    <div class="row">

    </div>
</div>
<button id="btn">点击下一页</button>
<script>
    $(function () {
        var indexNum=0;
        var load=false;
        $("#btn").click(function () {
            load=true;
            $.post("json.js",function (res) {
                var data=JSON.parse(res)[indexNum]
                var htmlStr=""
                for(var j=0;j<data.length;j++){
                    htmlStr+='<div class="col-md-3 col-sm-6"><a href="#" class="thumbnail">' +
                        '<img src="'+data[j].img+'" alt=""></a><span>'+data[j].text+'</span>' +
                        '<span style="color:red">'+data[j].price+'</span></div>';
                }
                $(".row").html(htmlStr);
                indexNum++
                if(indexNum>=4){
                    $("#btn").replaceWith("没有更多显示了");
                    return;
                }
                load=false;
            })
        })
    })
</script>
</body>
</html>

xcj888it

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jqAjax点击加载

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Ajaxpagination&lt;/title&gt; &lt;link href="https://cdn.bootcss.com
复制链接

扫一扫