• 提升品牌形象
  • 最新HTML5+Css3网站制作技术
  • 完全区分与同行的震撼视觉体验
  • 自动适应平板、手机及电脑屏幕
  • 详细介绍
  • 企业网站入门首选
  • 强大丰富的系统功能
  • 超过1000种页面风格
  • 每年仅需¥1500元,两年仅需¥2000元
  • 详细介绍
  • 4000/4006两种开头选择
  • 智能占线、断线呼转
  • 高达300组可呼转号码
  • 智能语音导航
  • 详细介绍

If you have any question,please contact with us.

  • 昆明网站建设-在线客服

    蛋切刀 一指
    妖异眼瞳
  • 昆明网站设计-服务电话

    4000-555-94113099998627
  • 昆明网站建设-联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101

HTML5 实例-微设计创意工坊 为您提供 昆明网站制作 昆明网站建设 昆明网站设计 云南网站建设 昆明网络公司

  • Home
  • /
  • HTML5 实例
实例8-5 使用JSON对象存取数据

实例8-5 使用JSON对象存取数据

1.功能描述

创建一个简单的学生信息管理页面,当用户输入姓名、分数,选择性别,单击“增加”按钮后,使用JSON中的stringify()方法,将数据保存在localStorage对象中;同时,调用JSON中的parse()方法实时在页面中显示新增的学生数据信息。

2.实现代码

在DreamweaverCS5中新建一个HTML页面8-5.html,加入代码如代码清单8-5所示。

代码清单8-5 使用JSON对象存取数据

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>使用JSON对象存取数据</title>
	<link href="Css/css8.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" language="jscript"
	        src="Js/js5.js"/>
	</script>
	</head>
	<body onLoad="getlocalData();">
	   <ul id="ulMessage">
	       正在读取数据...
	   </ul>
	   <p class="p5">
	      <span class="spanl">
	      学号:<input type="text" readonly="true" id="txtStuID"
	                   class="inputtxt" size="10"><br>
	      姓名:<input type="text" id="txtName" class="inputtxt"
	                   size="15">
	      </span>
	      <span class="spanr">
	      性别:<select id="selSex">
	              <option value="男">男</option>
	              <option value="女">女</option>
	           </selectxbr>
	      总分:<input type="text" id="txtScore" class="inputtxt"
	                   size="8">
	      </span>
	      <p class="btn">
	      <input id="btnAdd" type="button "value="增加"
	             class="inputbtn" onClick="btnAdd_Click();">
	      </p>
	    </p>
	</body>
	</html>

在代码清单8-5中,页面导入一个JavaScript文件js5.js,其中自定义多个函数,在页面加载和单击“增加”按钮时调用。其实现的代码如下所示:

	//JavaScript Document
	function $$(id){
	    return document.getElementByld(id);
	}
	//单击"增加"按钮时调用
	function btnAdd_Click(){
	    var strStuID=$$("txtStuID").value;
	    var strName=$$("txtName").value;
	    var strSex=$$("selSex").value;
	    var strScore=$$("txtScore").value;
	    if(strName.length>0 && strScore.length>0){
	     //定义一个实体对象,保存全部获取的值
	     var SetData=new Object;
	     SetData.StuID=strStuID;
	     SetData.Name=strName;
	     SetData.Sex=strSex;
	     SetData.Score=strScore;
	     var strTxtData=JSON.stringify(SetData);
	     localStorage.setltem(strStuID,strTxtData);
	   }
	   //重新加载
	   getlocalData();
	   //清空原先内容
	   $$("txtName").value="";
	   $$("txtScore").value="";
	}
	//获取保存数据并显示在页面中
	function getlocalData(){
	    //标题部分
	    var strHTML="<li class='li_h'>";
	    strHTML+="<span class='spn_a'>学号</span>";
	    strHTML+="<span class='spn_b'>姓名</span>";
	    strHTML+="<span class='spn_a'>性别</span>";
	    strHTML+="<span class='spn_c'>总分</span>";
	    strHTML+="</li>";
	    //内容部分
	    for(var intI=0;inti<localStorage.length;intl++){
	        //获取Key值
	        var strKey=localStorage.key(inti);
	        //过滤键名内容
	        if(strKey.subtring(0,3)=="stu"){
	          var GetData=JSON.parse(localStorage.getltem(strKey));
	          strHTML+="<li class='li_c'>";
	          strHTML+="<span class='spn_a'>"+GetData.StuID+"</span>";
	          strHTML+="<span class='spn_b'>"+GetData.Name+"</span>";
	          strHTML+="<span class='spn_a'>"+GetData.Sex+"</span>";
	          strHTML+="<span class='spn_c'>"+GetData.Score+"</span>";
	          strHTML+="</li>";
	        }
	    }
	    $$("ulMessage").innerHTML=strHTML;
	    $$("txtStuID").value="stu"+RetRndNum(4);
	}
	//生成指定长度的随机数
	function RetRndNum(n){
	    var strRnd="";
	    for (var intI=0;intI<n;intI++){
	         strRnd+=Math.floor(Math.random()*10);
	    }
	    returnstrRnd;
	}

3.页面效果

该页面在Chrome10浏览器中执行的页面效果如图8-5所示。

图8-5使 用JSON对象存取数据

4.源码分析

在本实例中,事件的触发与实例8-4基本相同,页面在加载时,都是先触发onLoadO事件,调用自定义的函数getl0CalData();单击“增加”按钮时,调用自定义的函数btnAdd_Click()。不同之处在于,调用函数getlocalData()遍历localStorage对象保存的数据时,通过JSON对象中的parse()方法,将键名对应的键值转换成一个装载全部键值数据的JSON对象“GetData”;调用该对象中的属性名称获取各个对应的键值数据,如“GetData.StuID”表示学生编号,显示在页面中。

在调用btnAdd_Click()函数时,先检测姓名与分数的内容是否为空。如果不为空,则使用“newObject”语句创建一个对象“SetData”,将输入的各种学生数据作为该对象的不同属性值进行保存;然后,通过调用JSON对象中的stringifyO方法,将对象SetData转成JSON格式的文本数据保存在变量“strTxtData”中;最后,调用setltem()方法,将变量“strStuID”与“strTxtData”分别作为键名与键值保存在localStorage对象中。详细实现过程如代码中加粗部分所示。

本文由昆明网站建设,昆明微设计整理发布,转载请保留链接


  • If you have any question,please contact with us.

  • QQ在线客服

    蛋切刀
    可乐上瘾
    妖异眼瞳
  • 服务电话

    4000-555-94113099998627
  • 联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101