您的位置：首页 > Web前端 > JavaScript

javascript json数据操作

2010-07-16 10:59 387 查看
本示例演示了对Javascript json数据的操作，包括常用的增删改查，不利用其他js框架，方便简洁。

下面为详细测试页面代码，不多做介绍

view source
< id=highlighter_749001_clipboard title="copy to clipboard" src=http://xcai.net/highlighter/clipboard.swf width=16 height=16 type=application/x-shockwave-flash menu="false" flashvars="highlighterId=highlighter_749001" wmode="transparent" allowscriptaccess="always" lk_mediaid="lk_juiceapp_mediaPopup_1247318387847" lk_media="yes">
print?

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=
""
 
onclick=
"add();"
>添加用户</a> <a

81.

82.
href=
"javascript:void(0);"

83.
title=
""
 
onclick=
"del();"
>删除用户</a> <a href=
"javascript:void(0);"

84.

85.
title=
""
 
onclick=
"frs();"
>更新用户</a>

86.
</div>

87.
<div>

88.
现有用户:

89.
<p id=
"t"
>

90.
</p>

91.
</div>

92.
</body>

93.
</html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航