点击‘查看更多’实现无刷新加载

是文字吗？最简单的方法是全部调入，然后用SPAN或者DIV隐藏多余内容，点击的时候调用JS显示其余内容。
关于无刷新加载当然是异步了，看看JQUERY吧。

解决方案 »

  1.   

    我想实现这个网站的加载效果 ：http://m.hyjianmei.com/products_list.html
      

  2.   

    Ajax 从服务器获取数据,然后渲染到浏览器.
      

  3.   

    Ajax请求，请求前先放一个加载的图片，得到数据后替换加载图片，这就是你要的效果。
      

  4.   

    前台HTML：<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="js/jquery.js" type="text/javascript"></script>
        <style type="text/css">
            body
            {
                border: 0px;
                margin: 0px;
                background-color: transparent;
                font-family: 宋体;
            }
            .divclass
            {
                padding-top: 50px;
                width: 700px;
            }
            .divclass a
            {
                float: right;
                text-decoration: none;
                color: Blue;
            }
            .divclass a:hover
            {
                float: right;
                text-decoration: underline;
                color: Green;
            }
            .ulclass
            {
                list-style: none;
                margin-left: 70px;
                padding: 0px;
            }
            .ulclass li
            {
                width: 100%;
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                text-align: left;
                border-bottom: 1px dashed #999;
            }
            .ulclass li a
            {
                float: left;
                text-decoration: none;
                color: Red;
            }
            .ulclass li a:hover
            {
                float: left;
                font-weight: bold;
                text-decoration: underline;
                color: Blue;
            }
            .ulclass li em
            {
                float: right;
                color: #999;
            }
            .ulclass li span
            {
                float: left;
            }
        </style>
        <script type="text/javascript">
            var page = 1;
            function nextpage() {
                $("#getmore").html("加载中...");
                $.get("ajax/GetPage.aspx", { page: page + 1 }, function (m) {
                    if (m == "") {
                        $("#getmore").html("数据已达最高值");
                        $("#getmore").css({ "margin-right": "340px" });
                    } else {
                        $("#getmore").html("点击展开更多...");
                        $(".ulclass").append(m);
                        page++;
                    }
                })
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div class="divclass">
            <ul class="ulclass">
                <asp:Repeater ID="Repeater1" runat="server" >
                    <ItemTemplate>
                        <li><em>
                            <%#Eval("time") %></em><span><%#Eval("imagename") %></span><a href="http://<%# Eval("imageurl") %>"
                                target="_blank" onfocus="this.blur()"><%#Eval("writer")%></a></li>
                    </ItemTemplate>
                </asp:Repeater>
            </ul>
            <a href="javascript:nextpage();" id="getmore" onfocus="this.blur()">点击展开更多...</a>
        </div>
        </form>
    </body>
    </html>后台cs： protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    setPage();
                }
            }        private void setPage()
            {
                //你可以忽略这段代码，绑定的方法自己写,这里是搜索出来绑定前面的前10个
                using (var entity = new Model.imagetestEntities())
                {
                    var ds = from n in entity.image
                             group n by n.imagename into g
                             select new
                             {
                                 imagename = g.Key,
                                 writer = g.Max(n => n.imagewriter),
                                 time = g.Max(n => n.addtime),
                                 imageurl = g.Max(n => n.imageurl)                         };                this.Repeater1.DataSource = ds.OrderBy(p => p.writer).Skip(0).Take(10).ToList();
                    this.Repeater1.DataBind();
                }
            }还有一个Ajax去的这个页面HTML只留头部:下面cs代码
     protected void Page_Load(object sender, EventArgs e)
            {
                if (!string.IsNullOrEmpty(Request["page"]))
                {
                    int pageindex = Convert.ToInt32(Request["page"]);
                    Response.Write(getpage(pageindex));
                }
            }        private string getpage(int pageindex)
            {
                StringBuilder sb = new StringBuilder("");            using (var entity = new Model.imagetestEntities())
                {
                    var ds = from n in entity.image
                             orderby n.addtime
                             select n;
                    List<Model.image> imaglist = ds.Skip((pageindex - 1) * 10).Take(10).ToList<Model.image>();
                    if (imaglist.Count > 0)
                    {
                        foreach (Model.image image in imaglist)
                        {
                            sb.Append("<li>");
                            sb.Append("<em>" + image.addtime + "</em>");
                            sb.Append("<span>" + image.imagename + "</span>");
                            sb.Append("<a href=\"http://" + image.imageurl + "\" target=\"_blank\" onfocus=\"this.blur()\">" + image.imageurl + "</a>");
                            sb.Append("</li>");
                        }
                    }
                }
                return sb.ToString();
            }其中查询绑定的 方法可以自己用自己的方法去写 这种方式 估计你还不习惯
      

  5.   

    ajax