Jquery重新学习之五[操作JSON数据]
1：Json格式在JS中直接通过"对象.属性名称"就可以进行访问；
<head> <title>jQuery 读取JSON 数据</title> <script src="JScript/jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> var objInfo = { 'name': '踏浪帅', 'sex': '男', 'Age': '20' }; $(function() { $("#Button1").click(function() { var strHTML = ""; strHTML += "姓名：" + objInfo.name + "<br>"; strHTML += "性别：" + objInfo.sex + "<br>"; strHTML += "年龄：" + objInfo.email + "<hr>"; $("#Tip").html(strHTML); }); ; }); </script></head><body> <div class="iframe"> <div class="title"> <input id="Button1" type="button" class="btn" value="获取数据" /> </div> <div class="content"> <div id="Tip"></div> </div> </div></body></html> |
2：在前端JS字符串转化成JSON格式是通过eval()进行；
<head> <title>jQuery 操作JSON 数据</title> <script src="JScript/jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> var strInfo = "{'name': '小明','sex': '男','email': 'abc@126.com','date':1349340837359}"; $(function() { var strV0 = "原始数据"; var strV1 = "变化数据"; var strHTML = ""; //将字符串转成JSON对象 var objInfo = eval('(' + strInfo + ')'); //根据按钮文字改变JSON对象中的值 if ($(this).val() == strV1) { objInfo.date = new Date().getTime(); } strHTML += "姓名：" + objInfo.name + "<br>"; strHTML += "性别：" + objInfo.sex + "<br>"; strHTML += "邮箱：" + objInfo.email + "<br>"; strHTML += "时间：" + objInfo.date + "<hr>"; //切换按钮显示的文字 if ($(this).val() == strV0) { $(this).val(strV1); } else { $(this).val(strV0); } //显示处理后的数据 $("#Tip").html(strHTML); }); }); </script></head><body> <div class="iframe"> <div class="title"> <input id="Button1" type="button" class="btn" value="原始数据" /> </div> <div class="content"> <div id="Tip"></div> </div> </div></body></html> |
3：上面的Json格式都是比较简单类型（只是name:value类型），还有一种是带嵌套平时我们也会经常碰到；Json中是以"[]"来包含；我们可以通过each进行循环显示出来；
<head> <title>jQuery 遍历JSON 数据</title> <script src="JScript/jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> var objData = { member: [{ grade: "一年级", students: { name: ["刘小芳", "李大明"] } }, { grade: "二年级", students: { name: ["陈优", "王小海", "朱红"] } }, { grade: "三年级", students: { name: ["张妍", "蔡霞"] } }] }; function add_Grade() { var objmember = objData.member; var strHTML_0 = ""; $.each(objmember, function(index) { strHTML_0 += '<a href="javascript:" onclick="lnk_Click(' + index + ')">' + objmember[index].grade + '</a> '; }); $(".title").html("年级优秀学生：" + strHTML_0); }; function lnk_Click(i) { var objstudent = objData.member[i].students.name; var strHTML_1 = ""; $.each(objstudent, function(index) { strHTML_1 += ' ' + objstudent[index] + ' '; }); $("#Tip").html(strHTML_1); }; $(function() { add_Grade(); lnk_Click(0) }); </script></head><body> <div class="iframe"> <div class="title"></div> <div class="content"> <div id="Tip"></div> </div> </div></body></html> |
