通过Jquery遍历Json的两种数据结构的实现代码_Javascript教程-查字典教程网
通过Jquery遍历Json的两种数据结构的实现代码
通过Jquery遍历Json的两种数据结构的实现代码
发布时间:2016-12-30 来源:查字典编辑
摘要:在ajax交互中,我们从服务器端返回的数据类型有xml,html,script,json,jsonp,text,本文以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</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" value="', item.id, '"/> <label 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教程学习
    热门Javascript教程学习
    编程开发子分类