Flex中JSON使用的一些总结

本文介绍了JSON的基本概念及其在JavaScript中的使用方法,包括JSON对象的创建、属性调用、数组操作等,并提供了将JSON对象转换为字符串的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

JSON(JavaScript Object Notation) 是一种轻量级的数 据交换格式,它采用完全独立于语言的文本格式,可 以用来在客户端和服务器端传输数据!JSON对象既可用于AJAX的开发中,也可用一般的J2EE的开发中,用于一次性向后台提交多于一条的记录!(譬如 显示在页面上的table中记录)
JSON官方网站的介绍:(www.json.org)

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999. JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These properties make JSON an ideal data-interchange language.

JSON is built on two structures:


* A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.

* An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.


These are universal data structures. Virtually all modern programming languages support them in one form or another. It makes sense that a data format that is interchangable with programming languages also be based on these structures.

简单的示例:
1。var jsonObj={person1:{name:"jack",age:"12"},
person2:{name:"kate",age:"23"},
person3:{name:"jim",age:"14"}
};
调用JSON对象的属性,
1)jsonObj.person1.name
2)jsonObj["person1"].name
可以通过for循环的方式调用JSON对象中的每一个子对象
for(var p in jsonStr){
//alert(typeof p); alert(p);//返回的是string
str+=jsonObj[p].name+","+jsonObj[p].age+"<br>";
}

2。var jsonObj2={persons:[{name:"jordan",sex:"m",age:"40"},
{name:"bryant",sex:"m",age:"28"},
{name:"McGrady",sex:"m",age:"27"}
]};

调用JSON对象的属性,
1)jsonObj2.persons[0].name;
2)for循环调用方法,
var persons=jsonObj2.persons;//返回的值是一个数组object
for(var i=0;i<persons.length;i++){
cur_person=persons[i];
str+=cur_person.name+"'sex is "+cur_person.sex+" and age is "+cur_person.age+"<br>";
}
向jsonObj2的persons数组中插入,删除,更新 数据,
此处,可以利用javascript的Array对象的方法进行操作,如
var person={name:"yaoMing",sex:"m",age:"26"};
jsonObj2.persons.push(person);//数组最后加一条记录
jsonObj2.persons.pop();//删除最后一项
jsonObj2.persons.shift();//删除第一项
jsonObj2.persons.unshift(person);//数组最前面加一条记录
只要适合Javascript的方法都是可以用在JSON对象的数组中的!所以还有另外的方法splice( )进行crud操作!
//删除
jsonObj2.persons.splice(0,1);//开始位置,删除个数
//替换不删除
var self={name:"tom",sex:"m",age:"24"};
var brother={name:"Mike",sex:"m",age:"29"};
jsonObj2.persons.splice(1,0,self,brother);//开始位置,删除个数,插入对象
//替换并删除
var self={name:"tom",sex:"m",age:"24"};
var brother={name:"Mike",sex:"m",age:"29"};
jsonObj2.persons.splice(0,1,self,brother);//开始位置,删除个数,插入对象

二,知道了在Javascript中JSON的基本操作,但这还不能与后台进行交互,在着之前还需要把它转化为 String!

方法有两个,1)引入一个方法 :

function obj2str(o){
var r = [];
if(typeof o =="string") return "\""+o.replace(/([\'\"\\])/g,"\\$1").replace(/(\n)/g,"\\n").replace(/(\r)/g,"\\r").replace(/(\t)/g,"\\t")+"\"";
if(typeof o == "object"){
if(!o.sort){
r[0]="{"
for(var i in o){
r[r.length]=i;
r[r.length]=":";
r[r.length]=obj2str(o[i]);
r[r.length]=",";
}
if(!!document.all && !/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.toString)){
r[r.length]="toString:"+o.toString.toString();
r[r.length]=",";
}
r[r.length-1]="}"
}else{
r[0]="["
for(var i =0;i<o.length;i++){
r[r.length]=obj2str(o[i]);
r[r.length]=",";
}
r[r.length-1]="]"
}
return r.join("");
}
return o.toString();
}

网上找的,还蛮好用地!!在此对原创者表示感谢啦!!
### 修改 Element Plus Admin 主题颜色 Element Plus 是基于 Vue 3 和 Vite 构建的一个现代化组件库,而 `vue-element-plus-admin` 则是一个集成了 Element Plus 的管理后台模板。自定义主题颜色可以通过覆盖默认样式或者重新构建 CSS 变量来实现。 以下是关于如何在 `element-plus-admin` 中修改主题颜色的具体方法: #### 方法一:通过配置文件调整主题变量 如果项目支持按需加载(例如使用了 unplugin-vue-components 插件),可以编辑项目的全局样式文件(通常是 `src/styles/variables.scss` 或类似的 SCSS 文件)。找到并替换 Element Plus 默认的主题颜色变量。例如: ```scss // 覆盖 Element Plus颜色 $--color-primary: #ff5722; // 将色调改为橙红色 @import "~element-plus/packages/theme-chalk/src/index"; ``` 上述代码会将 Element Plus色调更改为指定的颜色[^1]。需要注意的是,在实际开发过程中可能还需要清理缓存或重启开发服务器以使更改生效。 #### 方法二:动态设置 CSS 变量 另一种方式是利用现代浏览器对 CSS 变量的支持,直接操作 DOM 来改变根节点上的 CSS 变量值。可以在 Vuex 或 Pinia 状态管理工具中存储用户的偏好颜色,并将其应用于整个页面。例如: ```javascript function setThemeColor(color) { document.documentElement.style.setProperty('--el-color-primary', color); } setThemeColor('#409EFF'); // 设置为主题蓝色 ``` 此函数允许运行时切换应用程序的要配色方案而不必刷新页面。 #### 方法三:借助插件完成复杂定制 对于更加复杂的场景,比如多套皮肤的选择器功能,则推荐引入专门用于处理样式的第三方库如 `css-vars-ponyfill` 或者自己封装逻辑去适配不同的需求环境下的表现形式。 以上三种途径都可以有效地帮助开发者达到个性化设计的目的,具体采用哪一种取决于个人喜好以及项目实际情况。 ```python # 示例 Python 配置 (仅作说明用途) def config_theme(theme_color): """模拟服务端渲染中的主题配置""" return f"--primary-color:{theme_color};" print(config_theme("#FFD700")) # 输出 --primary-color:#FFD700; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值