Jquery_jquery を介して 2 つの Json データ構造を走査するための実装コード

Ajax インタラクションでは、サーバーから返されるデータ型には、xml、html、script、json、jsonp、text が含まれます。この記事では、json を例として使用して、jquery を使用してフォアグラウンドで json の 2 つのデータ構造をトラバースする方法を説明します。 : "name/ "値" ペアのコレクション、値の順序付きリスト、および "名前/値" ペアのコレクションを含む値の順序付きリスト。サーバー側では、Json.NET を使用して arraylist をシリアル化します。 、hashTable、listおよびその他のデータ構造。
始める前に、Json.net をダウンロードする必要があります。ダウンロードが完了したら、Web サイトへの参照を追加し、ダウンロードしたフォルダーを開きます。.net2.0 以降の場合は、DoNet の Newtonsoft.Json を使用します。フォルダー.dll の場合、DotNet20 ファイルの下にある Newtonsoft.Json.dll を使用し、使用しているページで 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 = SQLCMD.ExecuteReader();
while (reader.Read()); HTresult.Add(" id", リーダー["id"]);
HTresult.Add("名前", リーダー["名前"]);
HTresult.Add("価格", リーダー["価格") "]);
}
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]

public string GetProductList(string KeyWord) {
SQLCMD = new SqlCommand("getProductList", SQLConnect);
SQLCMD.CommandType = CommandType.StoredProcedure
SQLCMD.Parameters.Add(new SqlParameter("@nameKeyWords") , SqlDbType.NVarChar, 30));
SQLCMD.Value = KeyWord;
SqlDataReader = SQLCMD.ExecuteReader(); ArrayList ProductList = new ArrayList();
while (reader .Read())
{
ProductList.Add(reader["name"].ToString()); .Close();
SQLConnect.Close();
if (ProductList.Count > 0)
{
return JsonConvert.SerializeObject(ProductList); 🎜>{
return "";
}
}


フロントデスク:




コードをコピー


コードは次のとおりです:

var assignList = $('

').hide().insertAfter(" #search #検索テキスト");
$("#検索テキスト").keyup(function () { var textString = "{KeyWord:'" $("#検索 #検索テキスト" ).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( assignList);
});
suggestList.show();
}
}); 「名前/値」ペアのコレクションを含む値の順序付きリスト





コードをコピー


コードは次のとおりです以下:


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 = キーワード;
ハッシュテーブルのブランド名情報;
リスト BrandNameInfoCollection = new List();
SQLConnect.Open();
using (SqlDataReader Reader = SQLCMD.ExecuteReader())
{
if (reader.HasRows)
{
while (reader.Read())
{
BrandNameInfo = 新しいハッシュテーブル();
BrandNameInfo.Add("BrandName", Reader["BrandName"].ToString());
BrandNameInfo.Add("ブランド中国名", リーダー["ブランド中国名"].ToString());
BrandNameInfo.Add("nameAbbreviation", Reader["nameAbbreviation"].ToString());
BrandNameInfoCollection.Add(BrandNameInfo);
}
SQLConnect.Close();
return JsonConvert.SerializeObject(BrandNameInfoCollection);
}
else
{
SQLConnect.Close();
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 ) のメソッドを追加しました。このメソッドの定義は、整形式の JSON 文字列を取得し、結果の JavaScript オブジェクトを返します。 つまり、適切な形式の JSON 文字列を受け取り、Javascript オブジェクトを返します。
これは、フロント台でサービス端末に対して生成された Json 文字列の処理に非常に役立ちます。
よろしくお願いします、Jquery遍历Jsonの2つのデータ構造の介在についてここに到達しました