Jquery_jquery를 통해 두 개의 Json 데이터 구조를 탐색하기 위한 구현 코드

Ajax 상호작용에서 우리가 서버에서 반환하는 데이터 유형에는 xml, html, script, json, jsonp 및 text가 포함됩니다. 이 기사에서는 jquery를 사용하여 포그라운드에서 json의 두 데이터 구조를 탐색하는 방법을 설명하기 위해 json을 예로 사용합니다. : "name/ "값" 쌍의 컬렉션, 정렬된 값 목록, "이름/값" 쌍 컬렉션을 포함하는 정렬된 값 목록. 서버 측에서는 Json.NET을 사용하여 arraylist를 직렬화합니다. , hashTable, list<> 및 기타 데이터 구조입니다.
시작하기 전에 Json.net을 다운로드해야 합니다. 다운로드가 완료된 후 웹사이트에 대한 참조를 추가하고 다운로드한 폴더가 .net2.0 이상인 경우 DoNet에서 Newtonsoft.Json을 사용합니다. 폴더.dll, 버전 2.0인 경우 DotNet20 파일 아래의 Newtonsoft.Json.dll을 사용한 다음 사용 중인 페이지에서 Newtonsoft.Json을 사용하여 해당 네임스페이스를 가져옵니다.
준비가 완료되면 아래 데모를 시작합니다. , 먼저 ProductService.asmx에 webService 파일 이름을 추가한 다음 [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",
성공 : function (msg) {
var result = jQuery.parseJSON(msg.d)
$("#resultInfo").append(result.id result.name result.price "
");
}
});
});

2. 순서가 지정된 값 목록 순회 ​​

코드 복사 코드는 다음과 같습니다.

ProductService.asmx GetProductList 메서드 추가
[WebMethod]
공개 문자열 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 = 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 presentsList = $('

').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( presentsList);
});
}
})

3. "이름/값" 쌍의 컬렉션을 포함하는 정렬된 값 목록

코드 복사

코드는 다음과 같습니다. 다음:

ProductService.asmx 添加 GetBrandNameByKeyword 방법
[WebMethod]
public string GetBrandNameByKeyword(string 키워드)
{
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 = 키워드;
해시테이블 BrandNameInfo;
목록 BrandNameInfoCollection = 새 목록();
SQLConnect.Open();
using (SqlDataReader reader = SQLCMD.ExecuteReader())
{
if (reader.HasRows)
{
while (reader.Read())
{
BrandNameInfo = 새로운 해시테이블();
BrandNameInfo.Add("BrandName", reader["BrandName"].ToString());
BrandNameInfo.Add("BrandChinaName", reader["BrandChinaName"].ToString());
BrandNameInfo.Add("nameAbbreviation", reader["nameAbbreviation"].ToString());
BrandNameInfoCollection.Add(BrandNameInfo);
}
SQLConnect.Close();
return JsonConvert.SerializeObject(BrandNameInfoCollection);
}
else
{
SQLConnect.Close();
널을 반환합니다.
}
}
}

前台

复主代码 代码如下:

$.ajax({
유형: "POST",
url: "ProductService.asmx/GetReceiverAddressInfo",
데이터: "{}",
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 ) 적법，설명적 정의는 올바른 형식의 JSON 문자열을 가져와서 결과 JavaScript 개체를 반환합니다. 就是接受一个格式良好的JSON字符串, 返回一个Javascript对象.

이전에는Json字符串의회사가있었습니다.
Jquery에서 Json을 사용하여 Jquery를 사용하고 있습니다.