Categories: Prototype教程

Prototype JSON 教程

JSON简介

JSON(JavaScript 对象表示法)是一种轻量级数据交换格式。

  • JSON 易于人类读写。
  • JSON 很容易被机器解析和生成。
  • JSON 基于 JavaScript 编程语言的一个子集。
  • JSON 尤其被整个 Web 的 API 使用,并且是 Ajax 请求中 XML 的快速替代品。
  • JSON 是一种完全独立于语言的文本格式。

Prototype 1.5.1 及更高版本,支持 JSON 编码和解析。

JSON编码

Prototype 提供了以下编码方法。

注意:确保至少有 1.6 版的 prototype.js。

编号方法及说明
1.Number.toJSON()
返回给定数字的 JSON 字符串。
2.String.toJSON()
返回给定字符串的 JSON 字符串。
3.Array.toJSON()
返回给定数组的 JSON 字符串。
4.Hash.toJSON()
返回给定哈希的 JSON 字符串。
5.Date.toJSON()
将日期转换为 JSON 字符串(遵循 JSON 使用的 ISO 格式)。
6.Object.toJSON()
返回给定对象的 JSON 字符串。

如果您不确定需要编码的数据类型,最好的办法是使用 Object.toJSON 所以:

var data = {name: 'Violet', occupation: 'character', age: 25 };
Object.toJSON(data);

这将产生以下结果:

'{"name": "Violet", "occupation": "character", "age": 25}'

此外,如果您使用的是自定义对象,则可以设置自己的 toJSON 方法,该方法将由Object.toJSON使用。例如:

var Person = Class.create();
Person.prototype = {
   initialize: function(name, age) {
      this.name = name;
      this.age = age;
   },  
   toJSON: function() {
      return ('My name is ' + this.name + 
         ' and I am ' + this.age + ' years old.').toJSON();
   }
};
var john = new Person('John', 49);
Object.toJSON(john);

这将产生以下结果:

'"My name is John and I am 29 years old."'

解析 JSON

在 JavaScript 中,解析 JSON 通常是通过评估 JSON 字符串的内容来完成的。Prototype 引入了String.evalJSON来处理这个问题。例如:

var d='{ "name":"Violet","occupation":"character" }'.evalJSON();
d.name;

这将产生以下结果:

"Violet"

将 JSON 与 Ajax 结合使用

将 JSON 与 Ajax 结合使用非常简单。只需在传输的 responseText 属性上调用String.evalJSON

new Ajax.Request('/some_url', {
   method:'get',
   onSuccess: function(transport) {
      var json = transport.responseText.evalJSON();
   }
});

如果您的数据来自不受信任的来源,请务必对其进行清理:

new Ajax.Request('/some_url', {
   method:'get',
   requestHeaders: {Accept: 'application/json'},
   onSuccess: function(transport) {
      var json = transport.responseText.evalJSON(true);
   }
}); 
terry

这个人很懒,什么都没有留下~

Share
Published by
terry

Recent Posts

自定义指令:聊聊vue中的自定义指令应用法则

今天我们来聊聊vue中的自定义…

4 天 ago

聊聊Vue中@click.stop和@click.prevent

一起来学下聊聊Vue中@cli…

2 周 ago

Nginx 基本操作:启动、停止、重启命令。

我们来学习Nginx基础操作:…

2 周 ago

Vue3:手动清理keep-alive组件缓存的方法

Vue3中手动清理keep-a…

2 周 ago

聊聊React和Vue组件更新的实现及区别

React 和 Vue 都是当…

3 周 ago