伤城文章网 > 计算机软件及应用 > php中返回JS数据在JS中解析

php中返回JS数据在JS中解析


一.JSON 简介
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。 同时也易于机器解析和生成。 JSON 采用完全独立于 语言的文本格式, 但是也使用了类似于 C 语言家族的习惯(包括 C, C++, C#, Java, JavaScript, Perl, Python 等)。这些特性使 JSON 成为理 想的数据交换语言。JSON 的详细解释请访问 JSON 官网,这个网站上有 图有真相, 建议认真学习下。 另外, JSON 在维基百科上的介绍也很详细, 可以访问一下。

二.PHP 中 JSON 编码
在 PHP 中生成 JSON 字符串是非常容易的,直接使用 json_encode()函 数就可以将 PHP 数据转换成 JSON 字符串,此函数原形如下: string json_encode ( mixed $value ) 这个函数可以为任何数据进行转码,除了 resource 类型。

三.Javascript 解析 JSON
有二种方法:一种是直接使用 eval()函数。这种方法最快速。然而由于 eval 方法同样可以执行任意的 JavaScript 代码,因此当数据来源不可 靠时则可能产生安全性问题。 比如下面这个例子就会导致页面被重定向:
[html] view plaincopy

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2. <html xmlns="http://www.w3.org/1999/xhtml"> 3. <head> 4. <title>一段使用 eval()解释会导致页面被重定向的 JSON 数据 </title> 5. <script type="text/javascript" src="../jquery-1.7.min.js"></scr ipt> 6. <script type="text/javascript"> 7. //jquery 通过 AJAX 方式得到 JSON 数据 8. $(document).ready(function(){ 9. var dangerJson = '{message:(function(){window.location=\'ht tp://blog.csdn.net/morewindows\';})()}'; 10. //eval(dangerJson); //会重定向 11. var jsonArray = JSON.parse(dangerJson); //会报错 - 无效字 符 12.}); 13.</script> 14.</head> 15.<body> 16.<h1>一段使用 eval()解释会导致页面被重定向的 JSON 数据</h1> 17.</body> 18.</html>

第二种方法可以防止不安全代码出现——通过浏览器原生支持的 JSON.parse(str)方法读取 JSON 数据, 该方法采用解析器验证读入的 代码是否真的是 JSON 代码,这样就提供了较好的安全性。但是,由于 这是用模拟的方式读取,速度上会比 eval()慢。

四.JSON 实例
下面以一个实例来解释数据是如何被编码成 JSON 字符串,JSON 字符串 又是如何在 javascript 中解析使用的,程序分为 json1.php 及 json1.html。程序还要引用 Smarty、JQuery 及 JSON 库文件。 1.json1.php

[php] view plaincopy 1. 2. 3. 4. 5. 6. 7. <?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/detai ls/7102362" 8. ), 9. "002" => array( 10. "title"=>"PHP 访问 MySql 数据库 中级篇 Smarty 技术", 11. "link"=>"http://blog.csdn.net/morewindows/article/detai ls/7094642" 12. ), 13. "003" => array( 14. "title"=>"PHP 访问 MySql 数据库 高级篇 AJAX 技术", 15. "link"=>"http://blog.csdn.net/morewindows/article/detai ls/7086524" 16. ), 17.); 18. 19.$tpl_article_json = json_encode($tpl_article_array); 20.$tpl = new Smarty(); 21.$tpl->assign("article_array", $tpl_article_array); 22.$tpl->assign("article_json", $tpl_article_json); 23.$tpl->display("json1.html"); 24.?>

2.json1.html
[html] view plaincopy 1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2. <html xmlns="http://www.w3.org/1999/xhtml"> 3. <head> 4. <title>使用 json</title> 5. <script type="text/javascript" src="../jquery-1.7.min.js"></scr ipt> 6. <script type="text/javascript" src="json2.js"></script> 7. <script type="text/javascript"> 8. $(document).ready(function(){

9.

var g_jsonstr = JSON.parse('{$article_json}');//通过 JSON.parse()解析 JSON 字符串 10. $("div").mouseenter(function(){ //mouseenter mouseover 11. var thisId = $(this).attr("id"); 12. var jsonid = thisId.substring(thisId.lastIndexOf("_") + 1, thisId.length); 13. 14. $("#article_link").css("position","absolute"); 15. $("#article_link").css("left","20px"); 16. $("#article_link").css("top",$(this).offset().top + $(t his).height()); 17. 18. $("#article_link").html("链接地址 " + g_jsonstr[jsonid]['link']); 19. $("#article_link").slideDown("fast"); 20. $(this).css("background-color","red"); 21. }); 22. $("div").mouseleave(function(){ //mouseleave mouseout 23. $("#article_link").hide(); 24. $(this).css("background-color","yellow"); 25. }); 26.}); 27.</script> 28.<style type="text/css"> 29.div 30.{ 31. font-family:sans-serif; 32.} 33.</style> 34.</head> 35.<body> 36.{foreach $article_array as $key=>$value} 37. <div id="div_{$key}"> 38. <h1>{$value['title']}</h1> 39. </div> 40.{/foreach} 41.<p><span id="article_link" style="display:none;z-index:100"></s pan></p> 42.</body> 43.</html>

运行结果如下(Win7+IE9.0):

当鼠标经过三个标题时,会触发 mouseenter 事件显示提示语句。


搜索更多“php中返回JS数据在JS中解析”

网站地图

All rights reserved Powered by 伤城文章网 5xts.com

copyright ©right 2010-2021。
伤城文章网内容来自网络,如有侵犯请联系客服。zhit325@126.com