ホームページ > ウェブフロントエンド > jsチュートリアル > JQuery は json と ajax を処理し、JSON のサンプル code_jquery を返します。

JQuery は json と ajax を処理し、JSON のサンプル code_jquery を返します。

WBOY
リリース: 2016-05-16 17:05:34
オリジナル
813 人が閲覧しました

1. JSON の基本的な知識。

JSON 内のオブジェクトは「{}」で識別されます。「{}」は、{"AreaId":"123"} などのオブジェクトを表し、オブジェクトの値はキーと値の形式になります。ペア(キー:値)。

"[]" は配列を識別し、配列内のデータは ["AreaId": "123", "AreaId": "345"] のように "," で区切られます。

多くの場合、これはオブジェクトの配列です。つまり、

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

[{"AreaId":"123" },{ "エリア ID":"345"}]

実際、配列もオブジェクトであり、上記の形式は次のように書くこともできます:

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

{"Area":[{"AreaId ":" 123"},{"エリア ID":"345"}]}

これは、2 つのサブデータを持つ Area オブジェクトを表します。各サブデータもオブジェクトであり、各サブオブジェクトは AreaId です。

JSON の文字列と文字の定義形式は、一般的な C 言語の定義と似ており、二重引用符は文字列を定義し、一重引用符は文字を定義します。

JSON キーは二重引用符で囲まれています。たとえば、上記の「Area」と「AreaId」は二重引用符で囲まれています。一部の言語では、エスケープ文字エスケープ二重引用符を使用できます。

2. JSON 文字の JavaScript 操作

1. まず、JSON 文字列と JSON オブジェクトを区別します

JSON 文字列:

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

Var strJSON = "{"Area": [{" エリア ID":"123"},{"エリア ID":"345"}]}",

実際、次のように書くこともできます:

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

Var strJSON = '{"Area": [{" エリア ID":"123"},{"エリア ID":"345"}]}'、

これは JSON 文字列を表します。JS では一重引用符と二重引用符の両方で文字列を表すことができるため、上記の二重引用符を使用した最初の引用符と一重引用符を使用した 2 番目の引用符は JSON 文字列を表します。

以下の JSON オブジェクトを見てください

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

Var JSON = {"Area": [{"エリア ID ":"123"},{"エリア ID":"345"}]},

ご覧のとおり、JSON オブジェクトの外側には一重引用符や二重引用符がありません。これは、それが JSON オブジェクトであることを意味します。


サーバー上で壊れたスクリプト:

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

$data ['id '] = 1;
$dat['name'] = "メアリー";
$da['red']= array_merge($data,$dat);
$data1[' id'] = 2;
$dat1['name'] = "Yanzi";
$da['blue']= array_merge($data1,$dat1);
print_r($da); /// (以下に示すように) 2 次元配列を出力します

/*
配列
(
[red] => 配列
(
[id] => 1
[name] => mary
) [青] = & gt; 配列
(
[ID] = & gt; 2
[名前] = & gt; ツバメ
)

*/
echo json_encode($da);//出力は json 形式に変換された文字列であり、js で直接使用できます (次のように)

/*
{"red":{"id" :1,"name":"メアリー"},"blue":{"id":2,"name":"u71d5u5b50"}}
*/
?>

jquery スクリプト:

js に戻った後の処理:

最初の処理では、varl 変換を使用する必要があります。文字列の場合は、eval を使用して jquery オブジェクトに変換します (次のように)

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

var arr = '{"red":{"id":1,"name":"mary"},"blue":{"id":2,"name":"u71d5u5b50"} }';//u71d5u5b50 これは php で自動的に変換されます
var dataObj = eval("(" arr ")");//ここに括弧と二重引用符が追加される理由はわかりませんが、単にjson 構文になると、丸暗記するしかありません。
$.each(dataObj,function(idx,item){
//Output
alter(item.id "Haha" item.name);
})

2 番目のタイプ: 変換は必要ありません:

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

var arr = {"red":{ "id" :1,"name":"メアリー"},"blue":{"id":2,"name":"u71d5u5b50"}};
$.each(arr,function(idx,item) ){
//Output
alert(item.id "Haha" item.name);
})

ループには 2 つのメソッドもあります:
//メソッド 1:

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

$.each(arr,function(idx) ,item) {
//Output
alert(item.id "はは" item.name);
})

//方法 2:

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

for(var key in arr){
アラート (キー);
アラート(arr[キー].status);
}

効果を試すことができます。

ajax が JSON を返した場合の処理​​方法

1. 通常の aspx ページを使用して処理します
この方法が最も処理しやすいと思います。以下のコードを見てください

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

$.ajax({
」 、
成功:function(data){
.demodata);

バックグラウンドでデータを送信するコードは次のとおりです

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

Response.Clear(); Response.Write ("[{"demoData":"これは JSON データです"}]");
Response.Flush();
この処理メソッドは、渡されたデータを json データに直接解析します。つまり、ここでのフロントエンド js コードは、data[0] などの文字列データではなく、データを json オブジェクト データに直接解析する可能性があります。オブジェクトデータはここで直接使用されます
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート