前台代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!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> <script type="text/javascript" src="js/JScript.js"></script> <link href="css/StyleSheet.css" type="text/css" rel="Stylesheet" /> <script type="text/javascript" language="javascript"> $(document).ready(function(){ function fun(){ $(".productimg").each(function() {//遍历所有图片 var othis = $(this),//当前图片对象 top = othis.offset().top - $(window).scrollTop();//计算图片top - 滚动条top if (top > $(window).height()) {//如果该图片不可见 return;//不管 } else { othis.attr('src', othis.attr('data-src')).removeAttr('data-src');//可见的时候把占位值替换 并删除占位属性 } }); } fun(); var pageIndex=0; function getGoods() { $.ajax({ url:"Handler.ashx", data:"pageIndex="+pageIndex, dataType:"json", type:"post", success:function(Json){ var htmlStr=""; $.each(Json.data,function(index,item){ htmlStr+="<a href='../product/product.aspx' target='_blank'><img class='productimg' data-src='' src='http://s0.husor.cn/image/blank.png' >"+item.spbt+"</a>"; }); $("#div_ajax").append(htmlStr); }, error: function(XMLHTTPRequest,status,msg){ $("#div_ajax").html(status+":"+msg); } }); //页面数增加 pageIndex++; } getGoods(); //$window.scroll(fn).resize(fn);//绑定事件 $(window).bind("scroll",function(){ fun(); // 判断窗口的滚动条是否接近页面底部 if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 ) { getGoods(); } }); }); </script> </head> <body> <form id="form1" runat="server"> <button id="btn" type="button">test</button> <div id="div_ajax" style="min-height:1000px; background-color:#666;"> </div> </form> </body> </html>
后台代码：
<%@ WebHandler Language="C#" Class="Handler" %> using System; using System.Web; using System.Data; public class Handler : IHttpHandler { public void ProcessRequest(HttpContext context) { int pageIndex = int.Parse(context.Request.Form["pageIndex"].ToString()); context.Response.ContentType = "text/plain"; string JsonStr = GetStr(pageIndex); context.Response.Write(JsonStr); } public bool IsReusable { get { return false; } } private string GetStr(int index) { DataTable dt = new DataTable(); dt.Columns.Add("spbh", typeof(int)); dt.Columns.Add("spbt", typeof(string)); dt.Columns.Add("fbr", typeof(string)); dt.Columns.Add("fbsj", typeof(string)); dt.Columns.Add("sfsh", typeof(int)); int length = 20;//每次取20条数据 for (int i = 0; i < length; i++) { DataRow row = dt.NewRow(); row["spbh"] = index; row["spbt"] = "商品标题商品标题商品" + index+"_"+i; row["fbr"] = "发布人" + index; row["fbsj"] = DateTime.Now.ToString(); if ((i % 3) == 0) row["sfsh"] = 0; else if (i % 3 == 1) row["sfsh"] = 1; else row["sfsh"] = 2; dt.Rows.Add(row); } return DataTableConvertJson.DataTableToJson("data",dt); } }
dataTable转json:
using System; using System.Data; using System.Configuration; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; using System.Text; public class DataTableConvertJson { #region dataTable转换成Json格式 /// <summary> /// dataTable转换成Json格式 /// </summary> /// <param name="dt"></param> /// <returns></returns> public static string DataTable2Json(DataTable dt) { StringBuilder jsonBuilder = new StringBuilder(); jsonBuilder.Append("{""); jsonBuilder.Append(dt.TableName); jsonBuilder.Append("":["); jsonBuilder.Append("["); for (int i = 0; i < dt.Rows.Count; i++) { jsonBuilder.Append("{"); for (int j = 0; j < dt.Columns.Count; j++) { jsonBuilder.Append("""); jsonBuilder.Append(dt.Columns[j].ColumnName); jsonBuilder.Append("":""); jsonBuilder.Append(dt.Rows[i][j].ToString()); jsonBuilder.Append("","); } jsonBuilder.Remove(jsonBuilder.Length - 1, 1); jsonBuilder.Append("},"); } jsonBuilder.Remove(jsonBuilder.Length - 1, 1); jsonBuilder.Append("]"); jsonBuilder.Append("}"); return jsonBuilder.ToString(); } #endregion dataTable转换成Json格式 #region DataSet转换成Json格式 /// <summary> /// DataSet转换成Json格式 /// </summary> /// <param name="ds">DataSet</param> /// <returns></returns> public static string Dataset2Json(DataSet ds) { StringBuilder json = new StringBuilder(); foreach (DataTable dt in ds.Tables) { json.Append("{""); json.Append(dt.TableName); json.Append("":"); json.Append(DataTable2Json(dt)); json.Append("}"); } return json.ToString(); } #endregion /// <summary> /// Msdn /// </summary> /// <param name="jsonName"></param> /// <param name="dt"></param> /// <returns></returns> public static string DataTableToJson(string jsonName, DataTable dt) { StringBuilder Json = new StringBuilder(); Json.Append("{"" + jsonName + "":["); if (dt.Rows.Count > 0) { for (int i = 0; i < dt.Rows.Count; i++) { Json.Append("{"); for (int j = 0; j < dt.Columns.Count; j++) { Json.Append(""" + dt.Columns[j].ColumnName.ToString() + "":"" + dt.Rows[i][j].ToString() + """); if (j < dt.Columns.Count - 1) { Json.Append(","); } } Json.Append("}"); if (i < dt.Rows.Count - 1) { Json.Append(","); } } } Json.Append("]}"); return Json.ToString(); } ///Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> /// <summary> /// 将一个数据表转换成一个JSON字符串，在客户端可以直接转换成二维数组。 /// </summary> /// <param name="source">需要转换的表。</param> /// <returns></returns> public static string DataTableToJson(DataTable source) { if (source.Rows.Count == 0) return ""; StringBuilder sb = new StringBuilder("["); foreach (DataRow row in source.Rows) { sb.Append("["); for (int i = 0; i < source.Columns.Count; i++) { sb.Append('"' + row[i].ToString() + "","); } sb.Remove(sb.Length - 1, 1); sb.Append("],"); } sb.Remove(sb.Length - 1, 1); sb.Append("]"); return sb.ToString(); } public static string CreateJsonParameters(DataTable dt) { /* /**************************************************************************** * Without goingin to the depth of the functioning of this Method, i will try to give an overview * As soon as this method gets a DataTable it starts to convert it into JSON String, * it takes each row and in each row it grabs the cell name and its data. * This kind of JSON is very usefull when developer have to have Column name of the . * Values Can be Access on clien in this way. OBJ.HEAD[0].<ColumnName> * NOTE: One negative point. by this method user will not be able to call any cell by its index. * *************************************************************************/ StringBuilder JsonString = new StringBuilder(); //Exception Handling if (dt != null && dt.Rows.Count > 0) { JsonString.Append("{ "); JsonString.Append(""Head":[ "); for (int i = 0; i < dt.Rows.Count; i++) { JsonString.Append("{ "); for (int j = 0; j < dt.Columns.Count; j++) { if (j < dt.Columns.Count - 1) { JsonString.Append(""" + dt.Columns[j].ColumnName.ToString() + "":" + """ + dt.Rows[i][j].ToString() + "","); } else if (j == dt.Columns.Count - 1) { JsonString.Append(""" + dt.Columns[j].ColumnName.ToString() + "":" + """ + dt.Rows[i][j].ToString() + """); } } /*end Of String*/ if (i == dt.Rows.Count - 1) { JsonString.Append("} "); } else { JsonString.Append("}, "); } } JsonString.Append("]}"); return JsonString.ToString(); } else { return null; } } }
css代码：
body { } .productimg { width:100px; height:220px; border:0px; margin-top:0px; position:relative; background:url('../image/loading.gif') no-repeat center center; }