ホームページ > 記事 > ウェブフロントエンド > js/jquery が json および配列形式を解析する方法の詳細な説明
js/jquery が json および配列形式を解析する方法の詳細な説明
- 高洛峰オリジナル
- 2017-02-17 16:49:231094ブラウズ
解析する前に、いくつかの概念を明確にする必要があります: 配列、連想配列、JSON の違いと接点は何ですか?
1. 概念の紹介
1. 配列
構文:
ECMAScript v3 は配列リテラルの構文を指定し、JavaScript 1.2 と JScript 3.0 がそれを実装します。式のカンマ区切りリストを角括弧内に配置することで、配列を作成および初期化できます。これらの式の値が配列要素になります。例:
var a = [1, true, 'abc'];
特定の操作については API を参照してください
ps: は角括弧で区切る必要があります。
2. 連想配列
1. 構文:
var myhash= {”key1″:”val1″, “key2″:”val2″ };//obj
2.var
myhash= {key1:”val1 '', key2:”val2″ };//obj-can also
ps: json 形式とほぼ同じですが、json 形式の要件はより厳密です (内部のキーと値のペアは二重引用符を使用する必要があります)。としてのみ使用できます。形式は標準です。操作する場合は、連想配列オブジェクト (obj) に変換する必要があります。
2. 簡単な操作
1. ハッシュ関連付け配列にキー値を追加します
// 新しいキー newkey を追加します。キー値は newval
myhash["newkey"] = "newval";
2. association 配列にはすでにキー値があります
// キー newkey を削除すると、同時にキー値に対応する newval が消えます
delete myhash["newkey"];
3. ハッシュ連想配列を走査します。
// ハッシュ配列全体を走査します
for (key in myhash) {
val = myhash[key];
}
4. 値を取得します
メソッド 1.myhash.key1
メソッド 2.myhash.key2
3.json
形式要件:
{"key1":"val1", "key2":"val2" };//この形式に厳密に従い、操作は連想配列の操作に基づいて行うことができます
2フロントエンドとバックエンドの対話におけるいくつかの重要なポイント
1. サーバーが送信するデータが 1 つの JSON ではなく、複数の JSON である場合、文字列は配列と連想配列を組み合わせて組み立てる必要があります
例: var objs = [{ id: 1, name: 'n_1' }, { id: 2, name : 'n_2'}];
2. 最初から最後まで、サーバーからクライアントに与えられるデータは単なる文字列です。そのため、js で必要な操作を実行できるようにするために、実行されるオブジェクト eval() を通じて js に変換できます。
そのため、jQuey で提供されている $.parseJSON() には制限があります。上記 1 で述べた状況の場合は、変換に eval() を使用し、その後 $.each(objs,function(i,o ){ を渡す必要があります)。 ...})
3. 具体的なコード例
ページコード:
<body>
<input type="button" value="send ajax json" onclick="sendAjaxByjson();"/>
<input type="button" value="send ajax array" onclick="sendAjaxByarray();"/>
</body>
<script type="text/javascript">
function sendAjaxByjson(){
$.post("json",{},function(data){
var obj=data;
alert(typeof obj);//string
//var a=eval(obj);不解，不注释则会报错..
var strToobj=$.parseJSON(obj);
alert(strToobj.name);
alert(typeof strToobj)//obj
var obja={'name':'techbirds','age':'23','sex':'male'};
alert(typeof obja);//obj
alert(obja['name']+":"+obja.age);
delete obja['name'];
});
}
function sendAjaxByarray(){
$.post("array",{},function(data){
var str=data;
alert(typeof str);//string
alert(typeof eval(str));//object
var obja=[1,2,3,4,5];
alert(typeof obja);//object
});
}
</script>
バックエンドコード:
@Override
protected void service(HttpServletRequest req, HttpServletResponse reps)
throws ServletException, IOException {
Map<String, Object> jsonMap=new HashMap<String, Object>();
jsonMap.put("name", "techbirds");
jsonMap.put("age", 23);
jsonMap.put("sex", "male");
reps.getWriter().print(JSONObject.fromObject(jsonMap).toString());
reps.getWriter().flush();
reps.getWriter().close();
}
@Override
protected void service(HttpServletRequest req, HttpServletResponse reps)
throws ServletException, IOException {
String array="[1,2,3,4,5,6]";
reps.getWriter().print(array);
reps.getWriter().flush();
reps.getWriter().close();
}
json および配列形式を解析するための js/jquery メソッドの詳細については、PHP 中国語に注意してください。関連記事はネットで！