js中的列举其实就是这个json格局的数据,也就是键值对存在的数据。
第一步:json的界说。
JSON(JavaScript Object Notation) 是一种轻量级的数据互换格局,采用完全自力于说话的文本格局,是抱负的数据互换格局。同时,JSON是 JavaScript 原生格局,这意味着在 JavaScript 中处置 JSON数据不必要任何特别的 API 或东西包。
本文本家儿如果对JS操作JSON的方法做下总结。
在JSON中,有两种布局:对象和数组。
1. 一个对象以“{”(左括号)起头,“}”(右括号)竣事。每个“名称”后跟一个“:”(冒号);“‘名称/值’ 对”之间运用 “,”(逗号)分隔。 名称用引号括起来;值若是是字符串则必需用括号,数值型则不必要。例如:
var o={"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"};
2. 数组是值(value)的有序调集。一个数组以“[”(左中括号)起头,“]”(右中括号)竣事。值之间运用 “,”(逗号)分隔。
第二步:json应用之级联下拉框。
具体代码如下所示:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>json数据下拉框</title>
</head>
<body>
<h2>省市联动框</h2>
省:<select id="selector" onchange=selectorChange(this.value)></select>
市:<select id="selector2"></select>
<script type="text/javascript">
var sheng = '{"广东省key":"广东省","河南省key":"河南省","河海说神聊省key":"河海说神聊省"}';
var shi = {
"广东省key":{"gkey1":"广州市","gkey2":"深圳市"},
"河南省key":{"hkey1":"郑州市","hkey2":"周口市"},
"河海说神聊省key":{"bkkey":"石家庄"}
};
//将json字符串转为json数据
var obj = JSON.parse(sheng);
var selector = document.getElementById("selector");
var selector2 = document.getElementById("selector2");
window.onload = function(){
for(var key in obj){
var opt = document.createElement("option");
opt.value = key;
opt.innerText = obj[key];
selector.appendChild(opt);
}
//获取广东省的市区,设置市区的默认值
var ds = shi["广东省key"];
for(var key in ds){
//初始化市下拉框
var opt2 = document.createElement("option");
opt2.value = key;
opt2.innerText = ds[key];
selector2.appendChild(opt2);
}
}
//动态设置市下拉框
function selectorChange(value) {
//起首清晰旧数据
selector2.options.length=0;
//按照省获取市的下拉框
var ds = shi[value];
for(var key in ds){
//初始化市下拉框
var opt2 = document.createElement("option");
opt2.value = key;
opt2.innerText = ds[key];
selector2.appendChild(opt2);
}
}
</script>
</body>
</html>
第三步:测试省市级联。
打开网页--查看默认市级下拉框--》在别离选择河南省和河海说神聊省查看市级下拉框的转变。结论是市级下拉框会随省的改变而改变。具体操作成果如下图所示:
第四步:当做面标的目的对象的实体类利用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script>
//界说学生小明
var student ={name:"小明",sex:"男",age:"10"};
console.log("name:"+student.name+" sex:"+student.sex)
//界说多个学生,也就是学生数组
var students = [
{name:"小亮",sex:"男",age:"11"},
{name:"小美",sex:"女",age:"12"}
];
console.log("-----------------------------获取第一个小亮 信息--------------------------------")
var xiaoliang = students[0];
console.log("name:"+xiaoliang.name+" sex:"+xiaoliang.sex)
//声明一个空的json数据
var testJson = {};
testJson.student = student;
testJson.students = students;
console.log(testJson)
//新增
testJson.student.test = {test:"测试"};
testJson.students.push(student);
console.log(testJson)
//点窜
testJson.student.test={test:"测试2"}
console.log(testJson)
//删除
delete testJson.student["test"];
console.log(testJson)
//移除数组中所有json数据
//testJson.students.splice(0,testJson.students.length);
console.log(testJson)
</script>
</html>
第五步:前后台数据交互。
ajax返回数据时将后台数据转为json传到前台,便于利用。springmvc则直接经由过程注解@RestController,@ResponseBody可以简单实现。
0 篇文章
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!