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

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

WBOY

Freigeben： 2016-05-16 18:11:27

Original

978 Leute haben es durchsucht

在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+"
"); 
} 
}); 
}); 

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 = $('').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) { 
$("").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 BrandNameInfoCollection = new List(); 
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 = [
' ', item.NoticeWords, ''
].join('');
});
}
});

在1.41中，jquery添加了 jQuery.parseJSON( json ) 的方法，该方法的定义是Takes a well-formed JSON string and returns the resulting JavaScript object. 就是接受一个格式良好的JSON字符串，返回一个Javascript对象。
这大大方便了我们在前台对服务器端生成的Json字符串的处理.
好了，关于Jquery遍历Json两种数据结构的介绍就到这里