通过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 相关文章推荐
一些mootools的学习资源
Feb 07 Javascript
始终在屏幕中间显示Div的代码(css+js)
Mar 10 Javascript
jQuery实现HTML5 placeholder效果实例
Dec 09 Javascript
jQuery代码实现发展历程时间轴特效
Jul 30 Javascript
JavaScript 消息框效果【实现代码】
Apr 27 Javascript
AngularJs学习第八篇 过滤器filter创建
Jun 08 Javascript
javascript作用域、作用域链(菜鸟必看)
Jun 16 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
Dec 03 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
Sep 12 Javascript
ant design charts 获取后端接口数据展示
May 25 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中的一个中文字符串截取函数
2007/02/14 PHP
php下intval()和(int)转换使用与区别
2008/07/18 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
PHP获取音频文件的相关信息
2015/06/22 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
解析利用javascript如何判断一个数为素数
2016/12/08 Javascript
vue-router 路由基础的详解
2017/10/17 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
vue检测对象和数组的变化分析
2018/06/30 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
python+opencv识别图片中的圆形
2020/03/25 Python
查看Django和flask版本的方法
2018/05/14 Python
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
python按照多个条件排序的方法
2019/02/08 Python
Django缓存系统实现过程解析
2019/08/02 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
领导接待方案
2014/03/13 职场文书
借款协议书
2014/09/16 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
机关作风建设心得体会
2014/10/22 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书
年终奖金发放管理制度,中小企业适用,拿去救急吧!
2019/07/12 职场文书
Golang连接并操作MySQL
2022/04/14 MySQL
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技