简介:

JSON,即JavaScript Object Notation,是一种轻量级的数据交换格式。JSON可以被用于几乎所有的编程语言中,JSON是一种文本格式,所以可以被人和机器阅读。JSON非常容易被实现和使用,仅仅一个字处理程序就能完成。JavaScript提供了JSON的解析API。

JSON解析之eval:

eval几乎无所不能,用eval函数可以解析JSON字符串,例如,下面的代码是正确的:

function parse_program_language(){
  var programStr = '[{"language":"Java","author":"James Gosling"},{"language":"C++","author":"Bjarne Stroustrup"},{"language":"JavaScript","author":"Brendan Eich"}]';

  var json = eval('(' + programStr + ')')
  console.log(json);

}

然而,eval函数存在安全隐患,一个简单的例子就是:如果有人恶意攻击,将javascript攻击代码拼凑在字符串中,甚至形成一个不完全规格的JSON字符串,eval依然可以执行。 我们强烈建议不要使用eval进行解析。

用JSON.parse解析JSON字符串:

建议用户使用JSON.parse来进行JSON的解析。

JavaScript提供了JSON.parse函数来解析JSON字符串 ,有两种写法:

JSON.parse(text) 

JSON.parse(text[, fun])

说明:fun是一个转换结果的函数, 将为对象的每个成员调用此函数。

下面,看一个例子(用JSON.parse(text) 进行解析):

json_parse.js:

function parse_program_language(){
  var programStr = '[{"language":"Java","author":"James Gosling"},{"language":"C++","author":"Bjarne Stroustrup"},{"language":"JavaScript","author":"Brendan Eich"}]';

  var json = JSON.parse(programStr);
  console.log(json);

  var node = window.document.getElementById("program");
  for (var i = 0; i<json.length;i++) {
    //console.log(json[i]);

    var li = document.createElement("li");
    li.innerHTML = json[i].language + ":" + json[i].author;
    
    node.appendChild(li);
  }

}

parse_json_test.html:

<!DOCTYPE html>
<html>
<body>
	<script src="./json_parse.js"></script>

<h1>Json Parse测试:</h1>
<h1>编程语言列表</h1>
<div>
	<ul id="program">
        
    </ul>
</div>

<script>
	parse_program_language();
</script>
</body>
</html>

运行结果:

javascript如何解析json javascript json解析_javascript如何解析json

 再看JSON.parse的第二种写法:

JSON.parse(text[, fun])

例如,上面的js代码可以写成:

function parse_program_language2(){
  var programStr = '[{"language":"Java","author":"James Gosling"},{"language":"C++","author":"Bjarne Stroustrup"},{"language":"JavaScript","author":"Brendan Eich"}]';

  var node = window.document.getElementById("program");
  var language = null;
  var author = null;
  var json = JSON.parse(programStr,function(key,value){
      console.log(key+":" + value);
      var li = null;
      if (key == "language") {
        language = value;
      }
      if (key == "author") {
        author = value;
        li = document.createElement("li");
      }
      if (li != null) { //language !=null && author != null
        li.innerHTML = language + ":" + author;
        node.appendChild(li);
        language = null;
        author = null;
      }
      
  });
}

运行效果和第一种写法一样。