一.JSON简介
JSON(javascript Object Notation)是一种轻量级的数据交换格式,易于阅读与编写
同时也是易于及其解析和生成.JSON采用完全独立于语言的文本格式,但是也是用了类似
于C家族的编码习惯(C++,C,C#,java,javascript,Perl,Python),这些特性使JSON成为理想的数据交换语言。对于JSON的解释,我们可以自己去访问官网。
要不也可以在维基百科上搜索下,有很详细的介绍
二 php中JSON编码
在php中生成JSON字符串很容易,直接用json_encode()函数就可以将JSON转换为字符串
其函数于原型为 string json_encode(mixed $value);
这个函数可以为任何数据惊醒转码,除了rescoure类型
三.javascript解析JSON
js解析JSON有两种方法;一种是直接使用eval()这个函数。该方法速度最快,然后由于eval()方法同样可以执行任何的js代码,所以当数据来源不可靠的时候,可能产生安全性问题。
比如接下来的这个例子,会导致页面被重定向
<!DOCTYPE html>
<html>
<head>
<title>一段使用eval()解释会导致页面被重定向的JSON数据</title>
<script type="text/javascript" src="../jquery-1.7.min.js"></script>
<script type="text/javascript">
//jquery通过AJAX方式得到JSON数据
$(document).ready(function(){
var dangerJson = '{message:(function(){window.location=\'http://blog.csdn.net/morewindows\';})()}';
//eval(dangerJson); //会重定向
var jsonArray = JSON.parse(dangerJson); //会报错 - 无效字符
});
</script>
</head>
<body>
<h1>一段使用eval()解释会导致页面被重定向的JSON数据</h1>
</body>
</html>
第二种方法可以防止不安全代码出现--通过浏览器原生支持的JSON.parse(str)方法读取JSON数据,该方法采用解释器验证读入的代码时候为真的JSON,代码,这样就提供了更好的安全性,但是这是用模式的方式读取,速度上会比eval()慢一些
四JSON示例
下面以一个示例来解释数据如何被编码成JSON字符串,JSON字符串又是如何在js中解释使用
<?php
// by MoreWindows( http://blog.csdn.net/MoreWindows )
require_once ('../../smarty_libs/Smarty.class.php');
$tpl_article_array = array(
"001" => array(
"title"=>"PHP访问MySql数据库 初级篇",
"link"=>"http://blog.csdn.net/morewindows/article/details/7102362"
),
"002" => array(
"title"=>"PHP访问MySql数据库 中级篇 Smarty技术",
"link"=>"http://blog.csdn.net/morewindows/article/details/7094642"
),
"003" => array(
"title"=>"PHP访问MySql数据库 高级篇 AJAX技术",
"link"=>"http://blog.csdn.net/morewindows/article/details/7086524"
),
);
$tpl_article_json = json_encode($tpl_article_array);
$tpl = new Smarty();
$tpl->assign("article_array", $tpl_article_array);
$tpl->assign("article_json", $tpl_article_json);
$tpl->display("json1.html");
?>
json1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>使用json</title>
<script type="text/javascript" src="../jquery-1.7.min.js"></script>
<script type="text/javascript" src="json2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var g_jsonstr = JSON.parse('{$article_json}');//通过JSON.parse()解析JSON字符串
$("div").mouseenter(function(){ //mouseenter mouseover
var thisId = $(this).attr("id");
var jsonid = thisId.substring(thisId.lastIndexOf("_") + 1, thisId.length);
$("#article_link").css("position","absolute");
$("#article_link").css("left","20px");
$("#article_link").css("top",$(this).offset().top + $(this).height());
$("#article_link").html("链接地址" + g_jsonstr[jsonid]['link']);
$("#article_link").slideDown("fast");
$(this).css("background-color","red");
});
$("div").mouseleave(function(){ //mouseleave mouseout
$("#article_link").hide();
$(this).css("background-color","yellow");
});
});
</script>
<style type="text/css">
div
{
font-family:sans-serif;
}
</style>
</head>
<body>
{foreach $article_array as $key=>$value}
<div id="div_{$key}">
<h1>{$value['title']}</h1>
</div>
{/foreach}
<p><span id="article_link" style="display:none;z-index:100"></span></p>
</body>
</html>