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> |