本示例演示了对Javascript json数据的操作,包括常用的增删改查,不利用其他js框架,方便简洁。
下面为详细测试页面代码,不多做介绍
01.
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
02.
<html xmlns=
"http://www.w3.org/1999/xhtml"
>
03.
<head>
04.
<title>Json Test</title>
05.
<style type=
"text/css"
>
06.
div
07.
{
08.
padding: 10px;
09.
border: solid 1px
#222;
10.
margin: 5px;
11.
font-size: 12px;
12.
}
13.
</style>
14.
15.
<script type=
"text/javascript"
>
16.
// 存储用户对象的数据格式
17.
// [
18.
// {'uid':'123','pwd':'123456'},
19.
// {'uid':'124','pwd':'123456'},
20.
// {'uid':'125','pwd':'123456'}
21.
// ]
22.
23.
function
$(obj) {
24.
return
typeof
(obj) ==
"string"
? document.getElementById(obj) : obj;
25.
}
26.
27.
var
json = [];
//申明数字
28.
29.
//添加新用户
30.
function
add() {
31.
var
uid = $(
'uid'
).value;
32.
var
pwd = $(
'pwd'
).value;
33.
for
(
var
i = 0; i < json.length; i++) {
34.
if
(json[i].uid == uid) {
35.
return
;
36.
}
37.
}
38.
json.push({
"uid"
: uid,
"pwd"
: pwd });
39.
show(json);
40.
}
41.
//删除用户
42.
function
del() {
43.
var
uid = $(
'uid'
).value;
44.
for
(
var
i = 0; i < json.length; i++) {
45.
if
(json[i].uid == uid) {
46.
json.splice(i, 1);
47.
break
;
48.
}
49.
}
50.
show(json);
51.
}
52.
//更新用户密码
53.
function
frs() {
54.
var
uid = $(
'uid'
).value;
55.
var
pwd = $(
'pwd'
).value;
56.
for
(
var
i = 0; i < json.length; i++) {
57.
if
(json[i].uid == uid) {
58.
json[i].pwd = pwd;
59.
break
;
60.
}
61.
}
62.
show(json);
63.
}
64.
//显示用户列表
65.
function
show(json) {
66.
var
html =
""
;
67.
for
(
var
i = 0; i < json.length; i++) {
68.
html +=
"UID:"
+ json[i].uid +
";PWD:"
+ json[i].pwd +
"/r/n"
;
69.
}
70.
$(
't'
).innerText = html;
71.
}
72.
</script>
73.
74.
</head>
75.
<body>
76.
<input type=
"hidden"
value=
""
id=
"selectedUsers"
/>
77.
<div>
78.
UID:<input type=
"text"
id=
"uid"
/> PWD:
79.
<input type=
"text"
id=
"pwd"
/>
80.
<a href=
"javascript:void(0);"
title=
""
οnclick=
"add();"
>添加用户</a> <a
81.
82.
href=
"javascript:void(0);"
83.
title=
""
οnclick=
"del();"
>删除用户</a> <a href=
"javascript:void(0);"
84.
85.
title=
""
οnclick=
"frs();"
>更新用户</a>
86.
</div>
87.
<div>
88.
现有用户:
89.
<p id=
"t"
>
90.
</p>
91.
</div>
92.
</body>
93.
</html>