jQuery+ashx实现加载更多（C#）

最新推荐文章于 2020-05-19 15:55:25 发布

angle_greensky110

最新推荐文章于 2020-05-19 15:55:25 发布

阅读量1.7k

点赞数

分类专栏： jQuery .net 文章标签：加载更多 jQuery ashx

本文链接：https://blog.csdn.net/angle_greensky110/article/details/24600635

版权

.net 同时被 2 个专栏收录

17 篇文章 1 订阅

订阅专栏

jQuery

3 篇文章 0 订阅

订阅专栏

1、前台页面：注意引入jQuery框架

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="panicList2.aspx.cs" Inherits="panicList2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>秒杀</title>
    <!--引入jQuery框架-->
     <script src="js/jquery.js" type="text/javascript"></script>  
        
<style type="text/css">   
html,body,ul,li{margin:0;padding:0;}ul{list-style:none;}
body{background-color:#fff;font-size:14px;-webkit-text-size-adjust:100%;}
img{vertical-align:middle;width:100%;}
.banner{position:relative;border-bottom:1px #d7d7d7 solid;}
.list-li{border-bottom:1px #d7d7d7 solid;padding:10px;display:-webkit-box;position:relative;}.uc-st{position:absolute;right:4px;bottom:-3px;background-color:#fe5601;border-radius:4px;color:#fefbfb;font-size:12px;line-height:18px;padding:0 6px;}.list-li:last-child{border-bottom:0;}.list-li:after{content:' ';position:absolute;left:0;top:0;width:66px;height:25px;background-repeat:no-repeat;background-size:contain;}
.list-killing:after{background-image:url(images/ms.png);}
.list-killover:after{background-image:url(images/over.png);}
.li-l{width:124px;height:124px;border:1px #d7d7d7 solid;margin-right:8px;}
.li-r{-webkit-box-flex:1;width:100%;display:-webkit-box;-webkit-box-orient:vertical;}.li-f{font-size:12px;color:#464646;line-height:16px;padding-top:6px;word-wrap:break-word;word-break:break-all;}.li-s{-webkit-box-flex:1;display:-webkit-box;-webkit-box-align:center;}.li-money{color:#ff5500;margin-right:4px;}.li-tip{background-color:#ff5500;color:#fff;margin-left:4px;display:inline-block;padding:0 1px;}.li-s > ins{text-decoration:none;color:#ff5500;font-size:20px;font-weight:bold;}.li-s > del{color:#999;}.li-t{height:16px;color:#999;}.vtao{border-top:1px #ddd solid;padding:20px 10px;color:#666;}.vtao > ul{display:-webkit-box;}.vtao-l,.vtao-r{display:-webkit-box;-webkit-box-align:center;}.vtao-l{-webkit-box-flex:1;height:55px;padding:0 10px 0 65px;background:url(images/T1PmbZFEpcXXcgIUZr-110-110.png) no-repeat;background-size:55px;font-size:12px;line-height:16px;}.vtao-r{width:80px;text-align:center;}.vtao-r > b{display:inline-block;width:80px;line-height:24px;border-radius:4px;color:#fff;}.vtao-r > .light{background-color:#ff5500;}.vtao-r > .gray{background-color:#999;}.vtao-r > em{font-style:normal;font-size:10px;}.c-float-modePop{text-align:center}.c-float-modePop .warnMsg{color:#fff}.c-float-modePop button{padding:6px 9px;color:#949494;background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#404040),color-stop(100%,#2e2e2e));border:0;-webkit-border-radius:2px}.c-float-shade{width:100%;display:block;position:absolute;z-index:99;background-color:#000;opacity:.5;top:0;left:0}.c-float-shade.hide{display:none}.c-float-popWrap{width:220px;border-radius:2px;z-index:9999;position:absolute;overflow:hidden}.c-float-popWrap .c-float-modePop{background-color:rgba(51,51,51,.9);border-radius:2px;padding:15px}.c-float-popWrap .c-float-modePop .warnMsg{padding:0;font-size:14px}.c-float-popWrap .c-float-modePop .content{margin-top:10px}.c-float-popWrap .c-float-modePop .doBtn{width:190px;margin-top:10px}.c-float-popWrap .c-float-modePop button{width:80px;height:30px;line-height:30px;color:#444;font-size:14px;background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#eee),color-stop(100%,#999));border:0;-webkit-border-radius:2px;padding:0;margin:10px 5px 0}.c-float-popWrap.hide{display:none;-webkit-box-shadow:none}.c-float-popWrap.show{display:block;-webkit-box-shadow:0 0 2px 2px rgba(0,0,0,.3)}.c-float-popWrap.msgMode .c-float-modePop .content,.c-float-popWrap.msgMode .c-float-modePop .doBtn{display:none}.c-float-popWrap.alertMode .c-float-modePop .content{display:none}.c-float-popWrap.alertMode .c-float-modePop .doBtn .cancel{display:none}.c-float-popWrap.confirmMode .c-float-modePop .content,.c-float-popWrap.confirmMode .c-float-modePop .doBtn{display:block}
    
</style> 
 <script type="text/javascript"> 
$(function () { 
function init(count, start) { 
$.ajax({ 
type: "GET", 
dataType: "json", 
url: "Handler/product.ashx", 
data: { action: "GetMoreNews", count: count, start: start }, 
beforeSend: function () { $("#divload").show(); $("#more2").hide(); }, 
complete: function () {$("#divload").show(); $("#more2").show(); }, 
success: function (json) { 
var str = ""; 
$.each(json, function (index, array) { 
var str="<a href=\"panicDetail.aspx?guid=" + array['guid'] + "\" style=\"text-decoration:none;\" target=\"_blank\" >"
+"<li class=\"list-li " + array['killstyle'] + " \">"
+"<div class=\"li-l\">"
+"<img src=\"http://www.shopnum1.com" + array['thumbimage2'] + "\"> </div> "
+"<ul class=\"li-r\">"
+"<li class=\"li-f\" style=\"text-decoration:none;\">" + array['productname'] + "</li>"
+"<li class=\"li-s\">"
+"<span class=\"li-money\">¥</span><ins>" + array['panicprice'] + "</ins>"
+"<span class=\"li-tip\">" + array['sale'] + "</span>"
+" <br><del>¥" + array['shopprice'] + "</del></li>"
+" <li class=\"li-t\">" + array['starttimestatus'] + "</li> </ul> </li>  </a>"
$("#more").append(str); 
}); 
if (json == "") { 

$("#more2").html("没有更多内容加载了……"); 
$("#divload").hide();
} 
} 
}); 
} 
var count = 5;   //每次加载5条数据
var start = 0; 
init(count, start); 
$(".get_more").click(function () { 
start += 5;   //每次加载5条数据
init(count, start); 
}); 
}); 
</script> 
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div class="banner">             
<img src="../images/T1CSTTFsRaXXb1upjX.jpg"><b class="b-close"></b>         
</div>             
 <div class="list">                      
           <ul id="more">

 </ul>
 <div id="divload" style="text-align:center;">
     <a href="javascript:;" class="get_more">::点击加载更多内容::</a> 
 </div>
    
    <div id="more2" style="text-align:center;"></div>
  
    </div>
    </div> 
    </form>
</body>
</html>

2、product.ashx：

<%@ WebHandler Language="C#" Class="product" %>

using System;
using System.Web;
using System.Data;
using mshopClass;
using System.Text;

public class product : IHttpHandler {

    public void ProcessRequest(HttpContext context)
    {
        StringBuilder tb = new StringBuilder();
        context.Response.ContentType = "text/plain";
        int count = int.Parse(context.Request.QueryString["count"].ToString());  //获取从aspx页面传递过来的参数
        int start = int.Parse(context.Request.QueryString["start"].ToString());  //获取从aspx页面传递过来的参数
        DataTable dt = WineNewsQueryFromMToN(count, start);
        tb.Append(DataTableToJSON(dt));
        context.Response.Write(tb.ToString());
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

    public static DataTable WineNewsQueryFromMToN(int count, int start)
    {

        string sql = "SELECT TOP " + count + " guid,name,detail,createtime FROM ShopNum1_Shop_Product f WHERE guid NOT IN (SELECT TOP " + start + " guid FROM tb1_Shop_Product ORDER BY createtime desc) ORDER BY createtime desc";
        DataTable dt = mallCtr.SqlTable(sql);
        return dt;
    }

    /// <summary>
    /// 将dt转化成Json数据 格式如 table[{id:1,title:'体育'},id:2,title:'娱乐'}]
    /// </summary>
    /// <param name="dt"></param>
    /// <returns></returns>
    public static string DataTableToJSON(DataTable dt)
    {
        StringBuilder jsonBuilder = new StringBuilder();
        jsonBuilder.Append("[");
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            if (i > 0)
                jsonBuilder.Append(",");
            jsonBuilder.Append("{");
            for (int j = 0; j < dt.Columns.Count; j++)
            {
                if (j > 0)
                    jsonBuilder.Append(",");
                jsonBuilder.Append(dt.Columns[j].ColumnName.ToLower() + ": '" + dt.Rows[i][j].ToString().Replace("\t", " ").Replace("\r", " ").Replace("\n", " ").Replace("\'", "\\\'") + "'");
            }
            jsonBuilder.Append("}");
        }
        jsonBuilder.Append("]");
        return jsonBuilder.ToString();
    }
}

3、效果：