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

 更新时间:2011年01月19日 23:58:07   转载 作者:  
在ajax交互中,我们从服务器端返回的数据类型有xml,html,script,json,jsonp,text,本文以json为例,讲述了在前台如何利用jquery遍历json的两种数据结构
在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两种数据结构的介绍就到这里

相关文章

  • jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容

    jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内

    本篇文章给大家介绍easyui datagrid 加载查询数据时,如果没有相关记录,则在datagrid中显示没有相关记录的提示信息,本文介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起看下吧
    2016-07-07
  • 打造基于jQuery的高性能TreeView(asp.net)

    打造基于jQuery的高性能TreeView(asp.net)

    项目中经常会遇到树形数据的展现,包括导航,选择等功能,所以树控件在大多项目中都是必须的。那一个实用的树应该具备什么功能呢?
    2011-02-02
  • jQuery实现首页图片淡入淡出效果的方法

    jQuery实现首页图片淡入淡出效果的方法

    这篇文章主要介绍了jQuery实现首页图片淡入淡出效果的方法,实例分析了jQuery图片淡入淡出效果的相关使用技巧,需要的朋友可以参考下
    2015-06-06
  • jQuery学习笔记 更改jQuery对象

    jQuery学习笔记 更改jQuery对象

    jQuery提供了一些方法,使流程变为生成jQuery对象A,操作jQuery对象A;更改为jQuery对象B,操作jQuery对象B
    2012-09-09
  • 简单常用的幻灯片播放实现代码

    简单常用的幻灯片播放实现代码

    幻灯片自动播放图片是当前网站比较流行的一个展示方式,这里项目需要,我自己做了一个简单的,就不详细讲解了,代码很简单。直接看效果图和代码吧,希望对大家有所帮助
    2013-09-09
  • Jquery树插件zTree用法入门教程

    Jquery树插件zTree用法入门教程

    这篇文章主要介绍了Jquery树插件zTree用法入门教程,实例分析了zTree插件的使用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • 基于jquery自定义图片热区效果

    基于jquery自定义图片热区效果

    前阵子接到个需求,联通网上营业厅经常需要专题页面做宣传,但是由于专题页面会有按钮,以及各个图片的链接,省分的人没有html基础,没人维护,量又比较大,需要开发出一个可自定义图片热区链接的后台,于是就有了这个
    2012-07-07
  • jquery getScript动态加载JS方法改进详解

    jquery getScript动态加载JS方法改进详解

    有许多朋友需要使用getScript方法动态加载JS,本文将详细介绍此功能的实现方法
    2012-11-11
  • jquery操作select常见方法大全【7种情况】

    jquery操作select常见方法大全【7种情况】

    这篇文章主要介绍了jquery操作select常见方法,结合实例形式总结分析了jQuery操作select常见的7种情况与相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • jQuery事件绑定用法详解(附bind和live的区别)

    jQuery事件绑定用法详解(附bind和live的区别)

    这篇文章主要介绍了jQuery事件绑定用法,结合实例形式较为详细的分析了jQuery事件绑定的实现原理与相关注意事项,并附带了相关绑定方法的使用说明,重点介绍了bind和live的区别,需要的朋友可以参考下
    2016-01-01

最新评论