jQuery_jquery で JSON を使用するための実装コード

JSON の形式の説明はここで見ることができます。非常に詳細で、中国語で書かれています。

JSON 形式の説明

JSON 内の属性名は引用符で囲む必要があることに注意することが重要です。

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 {……}
* *********** **/