js 枚举怎么用

2025-10-08 07:26:30

1、第一步: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)的有序集合。一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间运用 “,”(逗号)分隔。

2、第二步: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>

js 枚举怎么用

js 枚举怎么用

3、第三步:测试省市级联。

打开网页--查看默认市级下拉框--》在分别选择河南省和河北省查看市级下拉框的变化。结论是市级下拉框会随省的改变而改变。具体操作结果如下图所示:

js 枚举怎么用

js 枚举怎么用

js 枚举怎么用

js 枚举怎么用

js 枚举怎么用

4、第四步:当做面向对象的实体类使用。

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

js 枚举怎么用

js 枚举怎么用

5、第五步:前后台数据交互。

ajax返回数据时将后台数据转为json传到前台,便于使用。springmvc则直接通过注解@RestController,@ResponseBody可以简单实现。

js 枚举怎么用

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢