通过Jquery遍历Json的两种数据结构的实现代码


Posted in Javascript onJanuary 19, 2011

在ajax交互中,我们从服务器端返回的数据类型有xml,html,script,json,jsonp,text,本文以json为例,讲述了在前台如何利用jquery遍历json的两种数据结构:“名称/值”对的集合,值的有序列表,以及值的有序列表里面包含“名称/值”对的集合,在服务器端,我们采用的Json.NET来序列化arraylist,hashTable,list<>等数据结构。
在开始之前,我们需要下载Json.net,下载完成后,在网站中添加引用,打开下载的文件夹,如果是.net2.0以上的版本,使用DoNet文件夹下的Newtonsoft.Json.dll,如果是2.0的版本,使用DotNet20文件下的Newtonsoft.Json.dll,然后在使用的页面导入其命名空间 using Newtonsoft.Json;
准备工作完毕后,下面开始演示,首先添加webService文件 命名为ProductService.asmx,然后取消对[System.Web.Script.Services.ScriptService] 的注释。
1、遍历 “名称/值”对的集合
ProductService.asmx 添加 getProductInfoToJson方法

[WebMethod] 
public string getProductInfoToJson(int productID) 
{ 
SQLCMD = new SqlCommand("select id,name,price from dbo.productTest where id=@id", SQLConnect); 
SQLCMD.CommandType = System.Data.CommandType.Text; 
SQLCMD.Parameters.AddWithValue("@id", productID); 
SQLConnect.Open(); 
SqlDataReader reader = SQLCMD.ExecuteReader(); 
Hashtable HTresult = new Hashtable(); 
while (reader.Read()) 
{ 
HTresult.Add("id", reader["id"]); 
HTresult.Add("name", reader["name"]); 
HTresult.Add("price", reader["price"]); 
} 
reader.Close(); 
SQLConnect.Close(); 
return JsonConvert.SerializeObject(HTresult); 
}

前台
$("#ShowInfo").click(function () { 
var selectValue = $("#DropDownListCourseID").val(); 
$.ajax({ 
type: "POST", 
url: "ProductService.asmx/getProductInfoToJson", 
data: "{productID:" + selectValue + "}", 
contentType: "application/json; charset=utf-8", 
dataType: "json", 
success: function (msg) { 
var result = jQuery.parseJSON(msg.d); 
$("#resultInfo").append(result.id + result.name + result.price+"<br/>"); 
} 
}); 
});

2、遍历 值的有序列表
ProductService.asmx 添加 GetProductList方法 
[WebMethod] 
public string GetProductList(string KeyWord) { 
SQLCMD = new SqlCommand("getProductList", SQLConnect); 
SQLCMD.CommandType = CommandType.StoredProcedure; 
SQLCMD.Parameters.Add(new SqlParameter("@nameKeyWords", SqlDbType.NVarChar, 30)); 
SQLCMD.Parameters["@nameKeyWords"].Value = KeyWord; 
SQLConnect.Open(); 
SqlDataReader reader = SQLCMD.ExecuteReader(); 
ArrayList ProductList = new ArrayList(); 
while (reader.Read()) 
{ 
ProductList.Add(reader["name"].ToString()); 
} 
reader.Close(); 
SQLConnect.Close(); 
if (ProductList.Count > 0) 
{ 
return JsonConvert.SerializeObject(ProductList); 
} 
else 
{ 
return ""; 
} 
}

前台:
var suggestList = $('<ul class="autocomplete"</ul>').hide().insertAfter("#search #search-text"); 
$("#search-text").keyup(function () { 
var textString = "{KeyWord:'" + $("#search #search-text").attr("value") + "'}" 
$.ajax({ 
type: "POST", 
url: "ProductService.asmx/GetProductList", 
data: textString, 
contentType: "application/json; charset=utf-8", 
dataType: "json", 
success: function (data) { 
suggestList.empty(); 
var objData = jQuery.parseJSON(data.d); 
$.each(objData, function (index, term) { 
$("<li></li>").text(term).appendTo(suggestList); 
}); 
suggestList.show(); 
} 
}); 
});

3、遍历 值的有序列表里面包含“名称/值”对的集合
ProductService.asmx 添加 GetBrandNameByKeyword方法 
[WebMethod] 
public string GetBrandNameByKeyword(string Keyword) 
{ 
SQLCMD = new SqlCommand("BrandInfo_Get_BrandName_UserInputKeyWord", SQLConnect); 
SQLCMD.CommandType = CommandType.StoredProcedure; 
SQLCMD.Parameters.Add(new SqlParameter("@KeyWord",SqlDbType.NVarChar,10)); 
SQLCMD.Parameters["@KeyWord"].Value = Keyword; 
Hashtable BrandNameInfo; 
List<Hashtable> BrandNameInfoCollection = new List<Hashtable>(); 
SQLConnect.Open(); 
using (SqlDataReader reader = SQLCMD.ExecuteReader()) 
{ 
if (reader.HasRows) 
{ 
while (reader.Read()) 
{ 
BrandNameInfo = new Hashtable(); 
BrandNameInfo.Add("BrandName", reader["BrandName"].ToString()); 
BrandNameInfo.Add("BrandChineseName", reader["BrandChineseName"].ToString()); 
BrandNameInfo.Add("nameAbbreviation", reader["nameAbbreviation"].ToString()); 
BrandNameInfoCollection.Add(BrandNameInfo); 
} 
SQLConnect.Close(); 
return JsonConvert.SerializeObject(BrandNameInfoCollection); 
} 
else 
{ 
SQLConnect.Close(); 
return null; 
} 
} 
}

前台
$.ajax({ 
type: "POST", 
url: "ProductService.asmx/GetReceiverAddressInfo", 
data: "{}", 
contentType: "application/json; charset=utf-8", 
dataType: "json", 
success: function (msg) { 
var resultCollection = jQuery.parseJSON(msg.d); 
$.each(resultCollection, function (index, item) { 
var AddressInfo = [ 
'<input type="radio" name="ReceiveAddress" class="address" value="', item.id, '"/> <label class="vtip" title="<font size=3><b>收件人:</b> ', item.ReceiverName, '</br><b>联系号码:</b> ', item.ReceiverPhoneNo, '</br><b>详细地址:</b> ', item.DetailsAddress, '</font>">', item.NoticeWords, '</label></br>' 
].join(''); 
}); 
} 
});

在1.41中,jquery添加了 jQuery.parseJSON( json ) 的方法,该方法的定义是Takes a well-formed JSON string and returns the resulting JavaScript object. 就是接受一个格式良好的JSON字符串,返回一个Javascript对象。
这大大方便了我们在前台对服务器端生成的Json字符串的处理.
好了,关于Jquery遍历Json两种数据结构的介绍就到这里
Javascript 相关文章推荐
斜45度寻路实现函数
Aug 20 Javascript
javascript smipleChart 简单图标类
Jan 12 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
Jan 04 Javascript
ExtJS4如何给同一个formpanel不同的url
May 02 Javascript
Jquery实现由下向上展开效果的例子
Dec 08 Javascript
JS+CSS实现的拖动分页效果实例
May 11 Javascript
javascript bom是什么及bom和dom的区别
Nov 26 Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
Vue.js实现实例搜索应用功能详细代码
Aug 24 Javascript
详解node单线程实现高并发原理与node异步I/O
Sep 21 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
Oct 23 Javascript
JQuery动态给table添加、删除行 改进版
Jan 19 #Javascript
jQuery 1.5最新版本的改进细节分析
Jan 19 #Javascript
基于Jquery与WebMethod投票功能实现代码
Jan 19 #Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
Jan 19 #Javascript
Jquery插件 easyUI属性汇总
Jan 19 #Javascript
jquery 圆形旋转图片滚动切换效果
Jan 19 #Javascript
Javascript调用C#代码
Jan 17 #Javascript
You might like
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
PHP中的类型提示(type hinting)功能介绍
2015/07/01 PHP
PHP AjaxForm提交图片上传并显示图片源码
2016/11/29 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
php 算法之实现相对路径的实例
2017/10/17 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
input 输入框内的输入事件详细分析
2010/03/17 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
2015/03/03 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
2015/03/04 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
Vue过滤器的用法和自定义过滤器使用
2017/02/08 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
2018/01/10 Javascript
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
js实现的格式化数字和金额功能简单示例
2019/07/30 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
python创建子类的方法分析
2019/11/28 Python
世界上最好的足球商店:Unisport
2019/03/02 全球购物
ORACLE第二个十问
2013/12/14 面试题
请编程遍历页面上所有 TextBox 控件并给它赋值为 string.Empty
2015/12/03 面试题
工厂保洁员岗位职责
2013/12/04 职场文书
商场消防演习方案
2014/02/12 职场文书
文化建设工作方案
2014/05/12 职场文书
个人批评与自我批评
2014/10/15 职场文书
python基础之匿名函数详解
2021/04/21 Python
python中的3种定义类方法
2021/11/27 Python