tips:使用前先引用jQuery
AjaxService.ashx — for循环DataTable组合成Json
using System; using System.Collections.Generic; using System.Data; using System.Linq; using System.Text; using System.Web; using Unisoft.ICM.Utility.Data; using Unisoft.ICM.Utility.Web; namespace ICM.Web.Home.AjaxService { /// <summary> /// 功能:首页头部商品分类Json /// 作者:李志伟 /// 时间:2016.03.22 /// SelIndustryProductTypeData 的摘要说明 /// </summary> public class SelIndustryProductTypeData : IHttpHandler//,System.Web.SessionState.IRequiresSessionState { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string IndustryID = context.Request["industryid"]; string CompanyID = context.Request["companyid"]; string notesql = string.Format(@"select ProductTypeID,ProductTypeName from vw_Mall_Industry_ProductType where CompanyID={0} and IndustryID={1}",CompanyID,IndustryID); DataTable noteData = DbHelpersql.Query(notesql).Tables[0]; string artsql = string.Format(@"select TypeID,TypeName,ParentID from tbl_Stock_ProductType where ParentID in(select distinct ProductTypeID from vw_Mall_Industry_ProductType where CompanyID={0} and IndustryID={1})",IndustryID); DataTable artData = DbHelpersql.Query(artsql).Tables[0]; StringBuilder strJson = new StringBuilder(); strJson.Append("["); for (int i = 0; i < noteData.Rows.Count; i++) { strJson.Append("{"); strJson.AppendFormat("\"ProductTypeID\":\"{0}\",",noteData.Rows[i]["ProductTypeID"].ToString()); strJson.AppendFormat("\"ProductTypeName\":\"{0}\",noteData.Rows[i]["ProductTypeName"].ToString()); strJson.Append("\"ProData\":"); strJson.Append("["); DataRow[] dtRow = artData.Select(" ParentID=" + noteData.Rows[i]["ProductTypeID"].ToString()); for (int k = 0; k < dtRow.Count(); k++) { strJson.Append("{"); strJson.AppendFormat("\"TypeID\":\"{0}\",dtRow[k]["TypeID"].ToString()); strJson.AppendFormat("\"TypeName\":\"{0}\"",dtRow[k]["TypeName"].ToString()); if (k != dtRow.Count()-1) strJson.Append("},"); else strJson.Append("}"); } strJson.Append("]"); if (i != noteData.Rows.Count - 1) strJson.Append("},"); else strJson.Append("}"); } strJson.Append("]"); context.Response.Write(strJson.ToString()); } public bool IsReusable { get { return false; } } /* 结果格式如下: [ { "ProductTypeID":"1","ProductTypeName":"时尚童鞋","ProData":[ { "TypeID":"1","TypeName":"轮滑鞋" },{ "TypeID":"2","TypeName":"滑雪鞋" },{ "TypeID":"3","TypeName":"足球鞋" }] },{ "ProductTypeID":"1","ProductTypeName":"时尚男鞋","TypeName":"皮鞋" },"TypeName":"休闲鞋" },"TypeName":"跑步鞋" }] } //...................................... ] */ } }
HTML — Ajax解析Json,for遍历内容
function SelIndustryProductTypeData(IndustryID,CompanyID) { $.ajax({ url: '/Home/AjaxService/SelIndustryProductTypeData.ashx',type: 'GET',data: { industryid: IndustryID,companyid: CompanyID },success: function (data) { var dt = eval("(" + data + ")"); var item = ""; for (var k = 0; k <= dt.length - 1; k++) { item += "<dt class=\"mt15\">"; item += "<p class=\"font14 bold\">" + dt[k].ProductTypeName + "</p>"; item += "<span><img src=\"/images/index_iocn3_03.jpg\" width=\"12\" height=\"12\" /></span>"; item += "</dt>"; item += "<dd>"; var row = dt[k].ProData.length; for (var j = 0; j < row; j++) { item += "<a href=\"#\">" + dt[k].ProData[j].TypeName + "</a>"; } item += "</dd>"; } $("#nav-top").html(item); } }); }