Ajax 实现点击按钮加载更多

来源：互联网发布：大莫插件源码编辑：程序博客网时间：2024/05/17 22:54

html中主要是，实现模板引擎，放一个需要追加内容的盒子。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"/><link rel="stylesheet" type="text/css" href="../css/reset.css"/><link rel="stylesheet" type="text/css" href="css/css_comment.css"/><script src="../js/jquery-1.11.2.js" type="text/javascript" charset="utf-8"></script><script src="../js/template-native-debug.js" type="text/javascript" charset="utf-8"></script><script id="tpl" type="text/html">        <% for(var i=0; i< 6; i++ ) { %>      <div class="small_box"><div class="small_box_left"><a href=""><img src="<%= info[i].thumb %>"/></a></div><div class="small_box_right"><p><a href="#"><%= info[i].title %></a></p><p class="text"><%= info[i].description %></p><a href="#"><span class="glyphicon glyphicon-play-circle"> 今日影评</span></a><span class="text2"><%= info[i].date %></span></div></div        <% } %>            </script>    <script src="JS/commentJs.js" type="text/javascript" charset="utf-8"></script></head><body><div id="container"><div id="left"></div><div id="gengduo"><a href="javascript:void(0)" id="moreCommemt"><p>更多评论</p></a></div></div></body></html>

//点击更多建立请求，下面是commentJS代码

$(function(){var i =1;$.ajax({                    type:"get",                    url:"http://www.1905.com/api/content/index.php?m=converged&a=comment&page="+i+"&pagesize=20&callback=successgetall",                    dataType:"jsonp",                    success: function (data) {                        if (data.count != 20) {                        console.log(data);                            $("#left").text("亲，没有获取到数据");                            return;                        }                        //通过模板渲染html                        var html = template("tpl",data);                     $("#left").html(html);                    },                    error: function () {                         $("#left").text("亲，出错了");                    }              }); //这段ajax代码是上来循环遍历节点的，因为html中已经注释掉了$("#moreCommemt").click(function(){ i++; // url:"http://www.1905.com/api/content/index.php?m=converged&a=comment&page="+i+"&pagesize=20&callback=successgetall", //这个url这参数page=2用来获得是哪一个页面    $.ajax({                    type:"get",                    url:"http://www.1905.com/api/content/index.php?m=converged&a=comment&page="+i+"&pagesize=20&callback=successgetall",                    dataType:"jsonp",                    success: function (data) {                        if (data.count != 20) {                        console.log(data);                            $("#left").text("亲，没有获取到数据");                            return;                        }                        //通过模板渲染html                        var html = template("tpl",data);                     $("#left").append(html);                    },                    error: function () {                         $("#left").text("亲，出错了");                    }              });               });})

阅读全文

0 0