本示例演示了对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>
187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
