JavaScript转换与解析JSON方法实例详解

本文实例讲述了JavaScript转换与解析JSON方法。分享给大家供大家参考，具体如下：

json格式数据如下：

var json = { 'jquery': [{ "id": "1", "type": "ASP.NET", "title": "JSON全解析"}] }
    alert(json.jquery[0].id);
    alert(json.jquery[0].type);
    alert(json.jquery[0].title);

javascript解析json数据:

window.onload = function() {
 var json = { "China": "[{'City':'上海','value':'1'},{'City':'南京','value':'2'},{'City':'杭州','value':'3'},{'City':'武汉','value':'4'}]" }
 var datas = eval(json.China);
 for (var i = 0; i < datas.length; i++)
 {
  alert(datas[i].City);
  alert(datas[i].value);
 }
}

补充：jQuery解析json方法：

使用eval函数来解析，jquery的each方法来遍历

用JQuery解析JSON数据的方法，作为JQuery异步请求的传输对象，JQuery请求后返回的结果是json对象，这里考虑的都是服务器返回JSON形式的字符串的形式，对于利用JSONObject等插件封装的JSON对象，与此亦是大同小异，这里不再做说明。

这里首先给出JSON字符串集，字符串集如下：

var data="
{
root:
[
  {name:'1',value:'0'},
  {name:'6101',value:'北京市'},
  {name:'6102',value:'天津市'},
  {name:'6103',value:'上海市'},
  {name:'6104',value:'重庆市'},
]
}";

这里以JQuery异步获取的数据类型——json对象和字符串为依据，分别介绍两种方式获取到的结果处理方式。

eval()

对于服务器返回的JSON字符串，如果jquery异步请求没做类型说明，或者以字符串方式接受，那么需要做一次对象化处理，方式不是太麻烦，就是将该字符串放于eval()中执行一次。这种方式也适合以普通javascipt方式获取json对象，以下举例说明：

// 转换为json对象
var dataObj=eval("("+data+")");

为什么要 eval这里要添加 ("("+data+")"); 呢？

原因在于：eval本身的问题。 由于json是以”{}”的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。

加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行。举一个例子，例如对象字面量{}，如若不加外层的括号，那么eval会将大括号识别为JavaScript代码块的开始和结束标记，那么{}将会被认为是执行了一句空语句。所以下面两个执行结果是不同的：

// return undefined
alert(eval("{}");
// return object[Object]
alert(eval("({})");

对于这种写法，在JS中，可以到处看到。如: (function()) {}(); 做闭包操作时等。

//输出root的子对象数量
alert(dataObj.root.length);
$.each(dataObj.root,fucntion(idx,item){
  if(idx==0){
    return true;
  }
  //输出每个root子对象的名称和值
  alert("name:"+item.name+",value:"+item.value);
})

对于一般的js生成json对象，只需要将$.each()方法替换为for语句即可，其他不变。

服务器返回的JSON字符串

对于服务器返回的JSON字符串，如果jquery异步请求将type（一般为这个配置属性）设为“json”，或者利 用$.getJSON()方法获得服务器返回，那么就不需要eval（）方法了，因为这时候得到的结果已经是json对象了，只需直接调用该对象即可，这里以$.getJSON方法为例说明数据处理方法：

$.getJSON("http://www.xxxx.com/",{param:"gaoyusi"},function(data){
  //此处返回的data已经是json对象
  //以下其他操作同第一种情况
  $.each(data.root,function(idx,item){
    if(idx==0){
      //同countinue，返回false同break
      return true;
    }
    alert("name:"+item.name+",value:"+item.value);
  });
});

这里特别需要注意的是方式1中的eval()方法是动态执行其中字符串（可能是js脚本）的，这样很容易会造成系统的安全问题。所以可以采用一些规避了eval()的第三方客户端脚本库，比如JSON in JavaScript就提供了一个不超过3k的脚本库。

第二种解析方式就是使用Function对象来完成，它的典型应用就是在JQuery中的AJAX方法下的success等对于返回数据data的解析。

var json='{"name":"CJ","age":18}';
data =(new Function("","return "+json))();

此时的data就是一个会解析成一个json对象了。

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • 浅谈javascript中字符串String与数组Array

    简单点就是string是字符(串)... 而array是数组...可以放数字啊,字符啊等一系列东东!!! 上个示例: 复制代码 代码如下: var str = "liuzhanqi"; document.write(str["length"]);//等价str.l ength  var str = string.fromcharcode(72, 101, 108, 108, 111, 33); document.write(str); //各整数作为unicode编

  • javascript实现unicode与ASCII相互转换的方法

    本文实例讲述了javascript实现unicode与ASCII相互转换的方法.分享给大家供大家参考,具体如下: <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Unicode.ASCII相互转换</title> <script type="text/javascript"&g

  • JavaScript字符串String和Array操作的有趣方法

    字符串和数组在程序编写过程中是十分常用的类型,因此程序语言都会将String和Array作为基本类型,并提供许多字符串和数组的方法来简化对字符串的操作.JavaScript里面也提供了String类型和Array类型,并且有很多基本的String方法和Array方法来方便地对字符串进行合并.查找.替换.截取等处理. JavaScript作为一个脚本语言,又提供了一种动态解析运行的机制,而这特性,又让使得在String操作的时候出现一些结合使用Array的有趣方法.这些方法可能有些偏门有点奇怪,但

  • JavaScript中字符串与Unicode编码互相转换的实现方法

    JavaScript中字符串与Unicode编码互相转换的实现方法

    本文实例讲述了JavaScript中字符串与Unicode编码互相转换的实现方法.分享给大家供大家参考,具体如下: 这段代码演示了JavaScript中字符串与Unicode编码的转换: // 为了控制台的演示方便, 变量没有添加 var 定义 // 实际编程中请避免 // 字符串 str = "中文"; // 获取字符 char0 = str.charAt(0); // "中" // 数字编码值 code = str.charCodeAt(0); // 20013

  • javascript中数组array及string的方法总结

    一.array的方法总结 会更改原来的的数组 push.unshift方法,返回length.增加值得就返回length,其他返回该元素 pop,shift返回该元素 reverse返回该元素 splice(start,deleteCount,addItem...),从原数组中删除和增加,返回删除的数组 不会改变原来的数组,返回新的数组 concat,join,slice(start,end) 记住这3个是返回新数组,其他的会改变原来的数组 二.Sting的方法总结 不对原始值做改变,都是返回一

  • JavaScript中的数据类型转换方法小结

    JavaScript 变量可以转换为新变量或其他数据类型: 通过使用 JavaScript 函数 通过 JavaScript 自身自动转换 将数字转换为字符串 全局方法 String() 可以将数字转换为字符串. 该方法可用于任何类型的数字,字母,变量,表达式: 实例 String(x) // 将变量 x 转换为字符串并返回 String(123) // 将数字 123 转换为字符串并返回 String(100 + 23) // 将数字表达式转换为字符串并返回 Number 方法 toStrin

  • javascript实现rgb颜色转换成16进制格式

    自己试过很好用 function zero_fill_hex(num, digits) { var s = num.toString(16); while (s.length < digits) s = "0" + s; return s; } function rgb2hex(rgb) { if (rgb.charAt(0) == '#') return rgb; var ds = rgb.split(/\D+/); var decimal = Number(ds[1]) *

  • Javascript实现Array和String互转换的方法

    本文实例讲述了Javascript实现Array和String互转换的方法.分享给大家供大家参考,具体如下: Array类可以如下定义: 复制代码 代码如下: var aValues = new Array(); 如果预先知道数组的长度,可以用参数传递长度 复制代码 代码如下: var aValues = new Array(20); 如下2种定义方式是一样的 方式1: var aColors = new Array(); aColors[0] = "red"; aColors[1]

  • Js判断参数(String,Array,Object)是否为undefined或者值为空

    有时候我们会遇到这样的情况:在一些前端控件要提交数据到服务器端的数据验证过程中,需要判断提交的数据是否为空.如果是普通表单的字符串数据,只需要在 trim 后判断 length 即可,而这里需要的数据可以是各种不同的类型(数字.字符串.数组.对象等等),通过 JSON.stringify(data) 进行序列化后再传递. 在这里定义如下的数据值为"空值": •undefined•null•空字符串及纯空白字符串:''.'    ' 等.•空数组:[]•空对象:{} 对于除此以外的数据值

  • JavaScript转换与解析JSON方法实例详解

    本文实例讲述了JavaScript转换与解析JSON方法.分享给大家供大家参考,具体如下: json格式数据如下: var json = { 'jquery': [{ "id": "1", "type": "ASP.NET", "title": "JSON全解析"}] } alert(json.jquery[0].id); alert(json.jquery[0].type); aler

  • JavaScript复制变量三种方法实例详解

    这篇文章主要介绍了JavaScript复制变量三种方法实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 直接将一个变量赋给另一个变量时,系统并不会创造一个新的变量,而是将原变量的地址赋给了新变量名.举个栗子: 复制代码 复制代码 let obj = { a: 1, b: 2, }; let copy = obj; obj.a = 5; console.log(copy.a); // Result // a = 5; // 更改obj的值,

  • javascript省市级联功能实现方法实例详解

    本文实例讲述了javascript省市级联功能实现方法.分享给大家供大家参考,具体如下: 初步实现方法: <html> <head> <script language="javascript"> function changecity(){ var province = document.form1.selprovince.value; var newoption1,newoption2; switch(province){ case "四

  • php解析xml方法实例详解

    本文以实例形式详细讲述了php解析xml方法.分享给大家供大家参考.具体分析如下: books.xml文件如下: <?xml version="1.0" encoding="ISO-8859-1"?> <bookstore> <book category="children"> <title lang="en">Harry Potter</title> <aut

  • mysql(5.6及以下)解析json的方法实例详解

    mysql(5.6及以下)解析json #json解析函数 DELIMITER $$ DROP FUNCTION IF EXISTS `json_extract_c`$$ CREATE FUNCTION `json_extract_c`( details TEXT, required_field VARCHAR (255) ) RETURNS TEXT CHARSET latin1 BEGIN SET details = SUBSTRING_INDEX(details, "{", -1

  • JavaScript处理解析JSON数据过程详解

    JSON (JavaScript Object Notation)一种简单的数据格式,比xml更轻巧. JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包. JSON的规则很简单: 对象是一个无序的"'名称/值'对"集合.一个对象以"{"(左括号)开始,"}"(右括号)结束.每个"名称"后跟一个":"(冒号):"

  • JavaScript中十种一步拷贝数组的方法实例详解

    JavaScript中十种一步拷贝数组的方法实例详解

    JavaScript中我们经常会遇到拷贝数组的场景,但是都有哪些方式能够来实现呢,我们不妨来梳理一下. 1.扩展运算符(浅拷贝) 自从ES6出现以来,这已经成为最流行的方法.它是一个很简单的语法,但是当你在使用类似于React和Redux这类库时,你会发现它是非常非常有用的. numbers = [1, 2, 3]; numbersCopy = [...numbers]; 这个方法不能有效的拷贝多维数组.数组/对象值的拷贝是通过引用而不是值复制. // numbersCopy.push(4);

  • JavaScript数组方法实例详解

    JavaScript数组方法实例详解

    目录 简介 创建数组 创建方法 详解 方法大全 join() push()和 pop() shift() 和 unshift() sort() reverse() concat() slice() splice() indexOf()和 lastIndexOf() forEach() map() filter() fill()  (ES6 新增) every() some() includes() (ES7) reduce()和 reduceRight() toLocaleString() 和

  • Kotlin 语言中调用 JavaScript 方法实例详解

    Kotlin 语言中调用 JavaScript 方法实例详解 Kotlin 已被设计为能够与 Java 平台轻松互操作.它将 Java 类视为 Kotlin 类,并且 Java 也将 Kotlin 类视为 Java 类.但是,JavaScript 是一种动态类型语言,这意味着它不会在编译期检查类型.你可以通过动态类型在 Kotlin 中自由地与 JavaScript 交流,但是如果你想要 Kotlin 类型系统的全部威力 ,你可以为 JavaScript 库创建 Kotlin 头文件. 内联 J

  • JavaScript 中调用 Kotlin 方法实例详解

    JavaScript 中调用 Kotlin 方法实例详解 Kotlin 编译器生成正常的 JavaScript 类,可以在 JavaScript 代码中自由地使用的函数和属性 .不过,你应该记住一些微妙的事情. 用独立的 JavaScript 隔离声明 为了防止损坏全局对象,Kotlin 创建一个包含当前模块中所有 Kotlin 声明的对象 .所以如果你把模块命名为 myModule,那么所有的声明都可以通过 myModule 对象在 JavaScript 中可用.例如: fun foo() =

随机推荐