jQuery での JSON の使用

jQuery は現在広く使用されているスクリプトライブラリです。では、jQuery で JSON を使用するにはどうすればよいでしょうか?

JSON を解析する

JSON を解析するための組み込みサポートは、jQuery ですでに提供されています。

jQuery.parseJSON 関数は解析サポートを提供します詳細な手順については、こちらを参照してください。

コードをコピーしますコードは次のとおりです。

 
var obj = jQuery.parseJSON('{ "name" :"John"}'); 
alert( obj.name === "John" ); 

オブジェクトを使用して JSON 形式の文字列を生成します

jQuery では使用できません。通常の JavaScript オブジェクトを JSON 文字列に直接変換するメソッドを提供します。これは、次の拡張ライブラリを使用して実現できます。

jquery-json 拡張ライブラリ

このライブラリは jQuery を拡張するために使用され、JSON を使用するための 2 つのメソッドを拡張します。

toJSON メソッドは、通常の JavaScript オブジェクトを JSON 文字列にシリアル化するために使用されます。

コードをコピーコードは次のとおりです。

 
var thing = {plugin: 'jquery- json'、バージョン: 2.3}; 
var encoded = $.toJSON( thing ); // '{"plugin":"jquery-json","version":2.3}' 

evalJSON メソッド JSON 文字列を解析してプレーンな JavaScript オブジェクトにします。

コードをコピーコードは次のとおりです。

 
var thing = {plugin: 'jquery- json'、バージョン: 2.3}; 
var encoded = $.toJSON( thing ); // '{"plugin":"jquery-json","version":2.3}' 
var name = $. evalJSON( encoded ).plugin; // "jquery-json" 
var version = $.evalJSON(encoded).version; // 2.3 

この拡張機能のダウンロードアドレス: http://code.google.com/p/jquery-json/

WCF で jQuery を使用する
クライアント

$.post in jQuery はサーバーに直接リクエストを発行し、サーバーから返されたデータを JSON 形式で解析できます。ただし、次の点に注意する必要があります。

リクエストされたコンテンツタイプは json 形式である必要があります。上記の jQuery-json 拡張ライブラリを使用して実行できます。完了するには、リクエストの contentType も text/json を使用して記述する必要があるため、特別な注意を払う必要があります。そのため、デフォルトの投稿ではリクエストに通常の名前と値のペアが使用されます。は: application/x-www-form-urlencoded で、$.ajaxSetup に渡すことができます:

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

 
// Ajax 設定
 $.ajaxSetup({ contentType: 'text/json' }); 

このように、要求されたコンテンツタイプは必須のタイプに設定されます。

次に、実際のリクエストのコンテンツは JSON モードである必要があります。これは、拡張ライブラリの $.toJSON を通じて実現できます。例:

$.toJSON({ x: 2, y : 3 } )

このように、サーバー側がサービスメソッド Sum を提供する場合、次のように定義されます:

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

 
public int Sum(int x, int y) 
{ 
return x y 
} 

は次のように呼び出すことができます。 WCF によって返されるデータはプロパティ d にあることに注意してください。

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

 
// Ajax 設定
$。 ajaxSetup({ contentType: 'text/json' }); 
$("#wcfBtn").click(function () { 
$.post("Service1.svc/Sum", $.toJSON({ x: 2 , y: 3 })、関数 (データ) { 
alert(data.d); 
}); -side 構成
 
まず、サービスにラベルを追加します: [System.ServiceModel.Activation.AspNetCompatibilityRequirements( 

RequirementsMode = System.ServiceModel.Activation.AspNetCompatibilityRequirementsMode.Allowed)]

コードをコピー

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

 
// #1 
// スクリプトで使用するには、このタグを追加する必要があります 
[System.ServiceModel.Activation.AspNetCompatibilityRequirements( 
RequirementsMode = System.ServiceModel. Activation.AspNetCompatibilityRequirementsMode.Allowed)] 
// #2 
// Web サイト構成ファイルでも設定する必要があります 
public class Service1 : IService1 
{ 
public int Sum(int) x, int y ) 
{ 
return x y; 
} 
} 

そして、Webサイトの設定ファイルで以下のように設定します。

コードをコピーしますコードは次のとおりです。

-relativeAddress サービスのアドレス
サービスは、サービスの種類、名前空間を含む完全な名前、さらにはアセンブリ
ファクトリを実装します。これは WCF システムによって提供されます。それを直接使用します
-->< ;relativeAddress="Service1.svc" service="MServer.Service1" Factory="System.ServiceModel.Activation.WebScriptServiceHostFactory"
/>
🎜>

/>

コードをコピーします

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

///////////1、HTML には次のような形式があります:

///////// ////もちろん、HTML で Js 関数を使用したい場合は、
//////////////2. 次に、次のコードを ajax.js ファイルに追加します function userSearch( ){
var query = $("#searchform input[@name='query']").val(); $.post("/userSearch.htm", { query: query } ,function callback(json){ var userlist = $.parseJSON(json); userList(userlist) }); /******************************************** 次のように説明します:
1), "#searchform input[@name='query']"; の意味: ID
2)、$("" ) を持つ searchform の下の input タグ (name 属性値は 'query') を選択します。 val() は、選択された属性の値を取得 ("") することを意味します。
3)、$.post() の最初のパラメーターは、ターゲットサーブレットを指定すること、つまり、このポストリクエストをそのサーブレットに送信することを意味します。サーブレット。
2 番目の項目は、このポストリクエストによって運ばれるデータです。「:」の前の項目はキーまたは名前で、最後の項目は値です。
3 番目の項目は、正式なコールバック関数です。ここでのコールバックの機能は、JSON オブジェクト json を JS オブジェクト userlist に変換し、その JS オブジェクトを関数 userList 3. post リクエストは、query という名前のパラメータをバックグラウンドに運びます。サーブレットの処理:
//post によってもたらされたデータを "query" という名前のパラメータから取得します。
String query = request.getParameter("query") );
if (query != null && !query.isEmpty()
&& !query.trim().equalsIgnoreCase("")) {
//「query」の値が空の場合、パラメータとして 'query' を使用して HQL ステートメントを構築します
String hql = "from TUser as user where user.userName like '" query "%'"; //ライブラリテーブル TUser でクエリを実行し、取得しますテーブル構造
List list = weilav3TUserDAO .getListByHQL(hql);
if (list != null && !list.isEmpty()) {
//リストが空でない場合は、リストをJSON オブジェクトを jsonArray に格納します
JSONArray jsonArray = JSONArray.fromObject(list);
//以下はクエリ結果を含む JSON オブジェクトをページに返します
response.setContentType("text/ html;charset=utf-8");
PrintWriter out = response.getWriter();
out.println(jsonArray);
……
}else {……}
* *********** **/