Jquery 를 통 해 JSon 의 두 가지 데이터 구 조 를 옮 겨 다 니 는 실현 코드

ajax 상호작용 에서 우 리 는 서버 에서 돌아 오 는 데이터 형식 은 xml,html,script,json,jsonp,text 가 있 습 니 다.본 고 는 json 을 예 로 들 어 프론트 데스크 에서 jquery 를 이용 하여 json 을 옮 겨 다 니 는 두 가지 데이터 구 조 를 설명 합 니 다.'이름/값'의 집합,값 의 서열 표,그리고 값 의 서열 표 에'이름/값'의 집합 을 포함 하고 서버 쪽 에 있 습 니 다.우리 가 사용 하 는 JSon.NET 은 arraylist,hashTable,list<>등 데이터 구 조 를 직렬 화 합 니 다.시작 하기 전에 저 희 는 JSon.net 을 다운로드 해 야 합 니 다.다운로드 가 완 료 된 후에 사이트 에 인용 을 추가 하고 다운로드 한 폴 더 를 열 어야 합 니 다.만약 에.net 2.0 이상 의 버 전이 라면 DoNet 폴 더 에 있 는 Newtonsoft.JSon.dll 을 사용 하고 2.0 버 전이 라면 DotNet 20 파일 에 있 는 Newtonsoft.JSon.dll 을 사용 한 다음 에 사용 하 는 페이지 에 네 임 스페이스 using Newtonsoft.JSon 을 가 져 옵 니 다.준비 작업 이 끝 난 후 다음 프레젠테이션 을 시작 합 니 다.먼저 웹 서비스 파일 이름 을 ProductService.asmx 라 고 추가 한 다음[System.Web.script.Service.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 두 가지 데이터 구 조 를 옮 겨 다 니 는 것 에 대한 소 개 는 여기까지 입 니 다.