加载更多

zhaipanyu · May 22, 2017 · 9bfc049 · 9bfc049
1 parent ef02b4b
commit 9bfc049
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 0 deletions.
diff --git a/jQuery/jq_点击加载更多/.router.js b/jQuery/jq_点击加载更多/.router.js
@@ -0,0 +1,16 @@
+function setRouter(app){ 
+ var router = app; 
+
+app.get('/getInfo', function (req, res) {
+    var len = req.query.length;
+    var idx = req.query.pageIndex;
+    var data = []
+    for (var i=0; i < len; i++) {
+        data.push('数据'+(idx*3+i+1))//每次加载3条,为数据4,5,6
+    }
+    res.send({
+        status :0,//成功码     
+        data:data       
+    });
+});}
+ module.exports.setRouter = setRouter
diff --git a/jQuery/jq_点击加载更多/loadMore.html b/jQuery/jq_点击加载更多/loadMore.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>模拟后台数据,加载更多数据</title>
+
+    <style>
+        ul,
+        li{
+           padding: 0;
+           margin: 0; 
+        }
+        .data-ct li{
+            padding: 5px ;
+            display: block;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            margin-top:20px;
+
+        }
+        .btn{
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            display: inline-block;
+            border: 1px solid red;
+            border-radius: 4px;
+            padding: 5px;
+            margin-top: 20px;
+            color: red;
+            text-align: center;
+        }
+        a{
+            text-decoration: none;
+        }
+
+    </style>
+    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
+</head>
+<body>
+    <ul class="data-ct">
+        <li>数据1</li>
+        <li>数据2</li>
+        <li>数据3</li>
+    </ul>
+    <a class = 'btn' href="#">加载更多</a>
+
+    <script>//ajax单独分离
+    var len = 3;
+    var pageIndex = 1;
+        $('.btn').on('click',function(){
+            $.ajax({
+                url:'/getInfo',
+                type:'get',
+                data:{
+                    length:len,
+                    pageIndex:pageIndex
+                },
+                dataType:'json'
+            }).done(function(res){
+                pageIndex++;
+                var data = res.data;
+                getData(data);
+            }).fail(function(){
+                alert('ajax-fail');
+            })
+        }) 
+
+//{新闻1.新闻2,新闻3}
+
+        function getData(data){
+            var html = '';
+            $.each(data,function(idx,data){ 
+                html += '<li>' + data + '</li>' 
+            })
+
+        //法2
+        //     for(var i=0;i<data.length;i++){
+        //     html += '<li>' + data[i] + '</li>' //遍历news数组，生成news[0],news[1],news[2]
+        // }
+
+            $('.data-ct').append(html);
+            console.log(html);
+        }
+    </script>
+</body>
+</html>
diff --git a/jQuery/jq_点击加载更多/router.js b/jQuery/jq_点击加载更多/router.js
@@ -0,0 +1,12 @@
+app.get('/getInfo', function (req, res) {
+    var len = req.query.length;
+    var idx = req.query.pageIndex;
+    var data = []
+    for (var i=0; i < len; i++) {
+        data.push('数据'+(idx*3+i+1))//每次加载3条,为数据4,5,6
+    }
+    res.send({
+        status :0,//成功码     
+        data:data       
+    });
+});