在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兩種數據結構的介紹就到這裡