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、效果:
4、实例下载:jQuery+ashx实现加载更多实例下载