点击按钮加载更多

最新推荐文章于 2024-05-16 06:43:17 发布

sindlly

最新推荐文章于 2024-05-16 06:43:17 发布

阅读量9.1k

点赞数

分类专栏： web开发

本文链接：https://blog.csdn.net/sindlly/article/details/52459068

版权

web开发专栏收录该内容

17 篇文章 0 订阅

订阅专栏

页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加载更多</title>
    <link rel="stylesheet" href="loadmore.css">
</head>
<body>
<div class="wapper">
    <div class="title">
        数据流模板
    </div>
    <div class="sub-title">
        数据流展示
    </div>
    <div class="data-container">
        <div class="serch-add">
            <input class="serch-text" type="text"><button class="serch-button">搜索</button>
            <button class="add">添加</button>
        </div>
        <div class="menu">
            <span class="tag">数据流名称</span>
            <span class="tag">单位名称</span>
            <span class="tag">单位符号</span>
            <span class="tag">操作</span>
        </div>
        <div class="detail-data" id="_data">

        </div>
        <div id="loading" style="width: 100px;height: 100px;display: none"><img style="width: 189px;height: 70px" src="juhua.gif"></div>
        <div class="add-more" id="addmore_btn"><button >加载更多</button></div>
    </div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="add-more.js"></script>
<!--<script src="loadmore.js"></script>-->
<!--<script src="ajaxTest.js"></script>-->
</body>
</html>

js 代码：

/**
 * Created by sindlly on 2016/9/7.
 */
var warrper = "#_data";   //定义加载内容的容器
var ajaxType = "POST"               //请求方式
var jsonUrl  = "data.json"         //地址，就是action请求路径
var dataType = "json"              //数据类型text xml json  script  jsonp
var clickBtn = "#addmore_btn"     //绑定点击按钮

$(document).ready(function() {
    getData();
    $(clickBtn).click(function(){
        getData();
        //加载菊花
        $(document).ajaxStart(function () {
            $("#loading").show();
        });
        $(document).ajaxComplete(function () {
            setTimeout(1000,$("#loading").hide());
        });
    })
})
var getData = function(){
    $.ajax({
        type: ajaxType,//请求方式k
        url: jsonUrl,//地址，就是action请求路径
        data: dataType,//数据类型text xml json  script  jsonp
        success: function(msg){//返回的参数就是 action里面所有的有get和set方法的参数
            console.log("请求成功");

            appenHtml(msg);
        }
    })
}
var appenHtml = function(msg){
    $.each(msg.data,function(key,val){
        var itemHtml ='<div class="detail"><span class="data-id">'+val.id+'</span>' +
            '<span class="data-name">'+val.data_name+'</span><span class="data-unit">'+val.unit+'</span>' +
            '<span class="data-symobl">'+val.symbol+'</span>' +
            '<button>编辑</button>' +
            '<button>删除</button></div>';
        $(warrper).append(itemHtml);
        $(".detail").animate({opacity:1},1000);
    })
}

css 代码：

body{
    padding: 0;
    margin: 0;
}
button{
    outline: 0;
}
.wapper{
    width: 1000px;
    min-height:600px ;
    background-color: #c8c8c8;
    margin: 100px auto;
}
.title{
    font-size: 24px;
}
.sub-title{
    margin-top: 20px;
    font-size: 13px;
}
.detail{
    width: 300px;
    height: 20px;
    margin-top: 10px;
    transition: width 1s;
    transition: height 1s;
    opacity:0;
    background-color: #fff;
    animation: detailshow 1s forwards linear;
}
@keyframes detailshow {
    0% { height: 20px}
    50% { height: 25px }
    100% {height: 30px}
}

json 数据：

{
  "data":[{
    "id": "1",
    "data_name":"温度",
    "unit":"摄氏度",
    "symbol":"℃"
  },{
    "id": "2",
    "data_name":"温度",
    "unit":"摄氏度",
    "symbol":"℃"
  },{
    "id": "4",
    "data_name":"温度",
    "unit":"摄氏度",
    "symbol":"℃"
  },{
    "id": "5",
    "data_name":"温度",
    "unit":"摄氏度",
    "symbol":"℃"
  },{
    "id": "6",
    "data_name":"温度",
    "unit":"摄氏度",
    "symbol":"℃"
  }]
}