如何制作 JQ 点击加载更多新闻列表效果

我现在有个文件如： a.aspx?page=1的参数
相当于我的页面已经有10条循环出来的数据了。
<li>新闻列表数据1</li>
<li>新闻列表数据2</li>
<li>新闻列表数据3</li>
<li>新闻列表数据4</li>
<li>新闻列表数据5</li>
<li>新闻列表数据6</li>
<li>新闻列表数据7</li>
<li>新闻列表数据8</li>
<li>新闻列表数据9</li>
<li>新闻列表数据10</li>
<li>点击加载更多</li>
这时只显示这里的数据。当点击加载更多后。page=2 就自动加载第2页的数据。由第一页变为第二页再变为第三页也要自动。

<li>新闻列表数据1</li>
<li>新闻列表数据2</li>
<li>新闻列表数据3</li>
<li>新闻列表数据4</li>
<li>新闻列表数据5</li>
<li>新闻列表数据6</li>
<li>新闻列表数据7</li>
<li>新闻列表数据8</li>
<li>新闻列表数据9</li>
<li>新闻列表数据10</li>
<li>新闻列表数据11</li>
<li>新闻列表数据12</li>
<li>新闻列表数据13</li>
<li>新闻列表数据14</li>
<li>新闻列表数据15</li>
<li>新闻列表数据16</li>
<li>新闻列表数据17</li>
<li>新闻列表数据18</li>
<li>新闻列表数据19</li>
<li>新闻列表数据20</li>
就显示这样。应该怎么写JQ呢？

9 个解决方案

#1

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <script>
     $(function () {
         var p = 1; //记录第几页
         $('#more').click(function () {
             p += 1; //下一页


             //===========模拟数据
             var s = '';
             for (var i = p * 10 + 1, j = p * 10 + 10; i <= j; i++) s += '<li>新闻列表数据' + i + '</li>';
             $(this).before(s);
             //===========模拟数据
/*
             //实际应用
             $.ajax({ url: 'xxxx.aspx', data: { page: p }, cache: false, dataType: 'html', success: function (html) {
                 $(this).before(html); //xxxx.aspx返回类似上面的模拟数据
              } });*/
             return false;
         });
     });
 </script>
 <ul><li>新闻列表数据1</li>
<li>新闻列表数据2</li>
<li>新闻列表数据3</li>
<li>新闻列表数据4</li>
<li>新闻列表数据5</li>
<li>新闻列表数据6</li>
<li>新闻列表数据7</li>
<li>新闻列表数据8</li>
<li>新闻列表数据9</li>
<li>新闻列表数据10</li>
<li id="more">点击加载更多</li></ul>

多看下jquery的API了，这么简单的ajax请求和dom操作

#2

多谢了，但是我改为实际应用后。加载更多没有哦

#3

版主能帮我在看下嘛。。

#4

你success增加alert输出html看看是不获取到数据了，是否和模拟的数据格式一样，就是
<li>,,,</li><li>,,,</li><li>,,,</li>

这种类似的数据

#5

//实际应用
             $.ajax({ url: 'searchlistz.aspx', data: { page: p }, cache: false, dataType: 'html', success: function (html) {
                 alert(ok);
                 $(this).before(html); //searchlist.aspx返回类似上面的模拟数据
             }
             });

加了没有数据

#6

改为模拟数据就有

#7

$.ajax({ url: 'searchlistz.aspx', data: { page: p }, cache: false, dataType: 'html', success: function (html) {

                 $(this).before(html); //searchlist.aspx返回类似上面的模拟数据
                 alert(html);
             }
             });

html有输出。

#8

用错对象了。。回调里面this指向的是ajax的配置。。改成这样

$.ajax({ url: 'searchlistz.aspx', data: { page: p }, cache: false, dataType: 'html', success: function (html) {

                  $('#more').before(html); //searchlist.aspx返回类似上面的模拟数据
                 alert(html);
             }
             });

#9

感谢了。不过我自己已经解决了。我是用 inhtml

#1

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <script>
     $(function () {
         var p = 1; //记录第几页
         $('#more').click(function () {
             p += 1; //下一页


             //===========模拟数据
             var s = '';
             for (var i = p * 10 + 1, j = p * 10 + 10; i <= j; i++) s += '<li>新闻列表数据' + i + '</li>';
             $(this).before(s);
             //===========模拟数据
/*
             //实际应用
             $.ajax({ url: 'xxxx.aspx', data: { page: p }, cache: false, dataType: 'html', success: function (html) {
                 $(this).before(html); //xxxx.aspx返回类似上面的模拟数据
              } });*/
             return false;
         });
     });
 </script>
 <ul><li>新闻列表数据1</li>
<li>新闻列表数据2</li>
<li>新闻列表数据3</li>
<li>新闻列表数据4</li>
<li>新闻列表数据5</li>
<li>新闻列表数据6</li>
<li>新闻列表数据7</li>
<li>新闻列表数据8</li>
<li>新闻列表数据9</li>
<li>新闻列表数据10</li>
<li id="more">点击加载更多</li></ul>