json学习Word格式文档下载.docx
《json学习Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《json学习Word格式文档下载.docx(15页珍藏版)》请在冰豆网上搜索。
xmlns="
//www.w3.org/1999/xhtml"
3.<
head>
4.<
title>
一段使用eval()解释会导致页面被重定向的JSON数据<
/title>
5.<
script
type="
text/javascript"
src="
../jquery-1.7.min.js"
<
/script>
6.<
7.//jquery通过AJAX方式得到JSON数据
8.$(document).ready(function(){
9.
var
dangerJson
=
'
{message:
(function(){window.location=\'
10.
//eval(dangerJson);
//会重定向
11.
jsonArray
JSON.parse(dangerJson);
//会报错
-
无效字符
12.});
13.<
14.<
/head>
15.<
body>
16.<
h1>
/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]
?
php
2.//
by
MoreWindows(
)
3.require_once
('
../../smarty_libs/Smarty.class.php'
);
4.$tpl_article_array
array(
5.
001"
=>
6.
title"
PHP访问MySql数据库
初级篇"
7.
link"
8.
),
002"
中级篇
Smarty技术"
12.
13.
003"
14.
高级篇
AJAX技术"
15.
16.
17.);
18.
19.$tpl_article_json
$tpl_article_array);
20.$tpl
new
Smarty();
21.$tpl->
assign("
article_array"
22.$tpl->
article_json"
$tpl_article_json);
23.$tpl->
display("
json1.html"
24.?
2.json1.html
使用json<
json2.js"
7.<
g_jsonstr
JSON.parse('
{$article_json}'
//通过JSON.parse()解析JSON字符串
$("
div"
).mouseenter(function(){
//mouseenter
mouseover
thisId
$(this).attr("
id"
jsonid
thisId.substring(thisId.lastIndexOf("
_"
+
1,
thisId.length);
#article_link"
).css("
position"
"
absolute"
left"
20px"
top"
$(this).offset().top
$(this).height());
17.
).html("
链接地址"
g_jsonstr[jsonid]['
link'
]);
19.
).slideDown("
fast"
20.
$(this).css("
background-color"
red"
21.
});
22.
).mouseleave(function(){
//mouseleave
mouseout
23.
).hide();
24.
yellow"
25.
26.});
27.<
28.<
style
text/css"
29.div
30.{
31.
font-family:
sans-serif;
32.}
33.<
/style>
34.<
35.<
36.{foreach
$article_array
as
$key=>
$value}
37.
div
id="
div_{$key}"
38.
{$value['
title'
]}<
39.
/div>
40.{/foreach}
41.<
p>
span
article_link"
style="
display:
none;
z-index:
100"
/span>
/p>
42.<
43.<
运行结果如下(Win7+IE9.0):
当鼠标经过三个标题时,会触发mouseenter事件显示提示语句。
JSON进阶第二篇AJAX方式传递JSON数据
分类:
HTML/javascript/PHP2012-01-1710:
14
2498人阅读
评论(4)
收藏
举报
上一篇《JSON进阶第一篇在PHP与javascript中使用JSON》示范了在PHP和javascript中如何使用JSON类型的数据,本篇将介绍用AJAX方式得到JSON数据从而动态生成标题和提示语句。
这种技术在静态页面向网站后台请求动态数据时比较有效,因为网站首页的访问量比较大,整个页面要静态化处理,但这个页面上的某些数据又要实时更新,这时就可以在静态页面中使用用AJAX来请求后台实时生成的JSON数据。
关于AJAX技术可以参考《PHP访问MySql数据库高级篇AJAX技术》,这里详细介绍如何使用AJAX来传递JSON数据。
本示例程序分为json2.php和json2.html,json2.html上有个按钮,按下后将发送AJAX请求得到json2.php返回的数据。
1.json2.php
3.$article_array
4.
count"
3,
20.);
21.$article_json
$article_array);
22.echo
$article_json;
23.?
2.Json2.html
ajax方式请求json<
7.//显示提示
8.function
OnMouseEnterDivInfo(thisObj,
title)
9.{
$(thisObj).offset().top
$(thisObj).height());
title);
$(thisObj).css("
16.}
17.//隐藏提示
18.function
OnMouseLeaveDivInfo(thisObj)
19.{
22.}
23.//jquery通过AJAX方式得到JSON数据
24.$(document).ready(function(){
#GetDataBtn"
).click(function(){
26.
$.post("
json2.php"
{},
function(data){
27.
JSON.parse(data);
28.
ilen
g_jsonstr['
count'
];
29.
detailhtml
;
30.
for
(var
i
0;
ilen;
i++)
{
32.
divhtml
id=\"
div_'
\"
onmouseenter=\"
OnMouseEnterDivInfo(this,
\'
g_jsonstr[i]['
]
onmouseleave=\"
OnMouseLeaveDivInfo(this);
33.
+=
34.
35.
divhtml;
36.
}
#detail"
).html(detailhtml);
//生成新的标题区域
slow"
40.
41.});
44.div
45.{
46.
47.}
48.<
49.<
50.<
51.<
input
button"
GetDataBtn"
value="
生成数据"
/>
52.<
detail"
53.<
54.<
55.<
56.<
运行效果如下:
JSON进阶第三篇apache多域名及JSON的跨域问题(JSONP)
本文先介绍如何为apache配置多域名,然后再用JSONP(JSONwithPadding)来解决JSON的跨域问题。
阅读本文之前,推荐先参阅《JSON进阶第二篇AJAX方式传递JSON数据》。
一.apache配置多域名
在apache的conf目录下找到httpd.conf,然后在该文件最后增加如下内容:
#声明使用虚拟主机过滤规则
NameVirtualHost*:
80
#虚拟主机localhost
VirtualHost*:
80>
ServerName
localhost
DocumentRoot"
D:
\xampp\htdocs\www"
/VirtualHost>
#虚拟主机
\xampp\htdocs\"
其中第一个是保证原有的localhost还可以继续工作,第二个为新加域名。
然后再修改host文件(在C:
\Windows\System32\drivers\etc\)
增加:
#
注意修改httpd.conf后要重启下apache服务。
将《JSON进阶第二篇AJAX方式传递JSON数据》文中的json2.php拷贝到D:
\xampp\htdocs\目录中再在浏览器中输入网址
运行结果如下:
在浏览器中能看到如上所示的JSON字符串说明已经成功为apache增加了新的域名,接下来就来体验下JSON的跨域名问题。
将json2.html中“$.post("
{},function(data){”的“json2.php”改成“
用Firefox的Firebug查看点击按钮后AJAX响应的详细过程,可以看到AJAX请求信息已经发送到服务器上了(就是那个127.0.0.1:
80),但因为安全性问题,服务器返回的数据被屏蔽了——这就是大名鼎鼎的跨域问题。
二.JSONP——解决JSON跨域问题
使用JSONP(JSONwithPadding)就可以解决JSON的跨域问题,JSONP的原理可以访问http:
//zh.wikipedia.org/zh-cn/JSONP,简单的说就是利用了<
script>
标签拥有的开放策略(相对于同域策略)。
下面介绍如何使用JSONP。
JSONP的使用分为二步:
第一将html文件中的
function(data){
改成
$.getJSON("
第二将json2.php最后的
echo$article_json;
echo$_REQUEST['
jsoncallback'
]."
("
.$article_json."
)"
修改这二个地方后就可以解决JSON的跨域问题了。
下面也给出完整的示例程序,分为json2.php和json2.html,json2.html上有个按钮,按下后将发送AJAX请求得到json2.php返回的跨域JSON数据。
注意和上一篇《JSON进阶第二篇AJAX方式传递JSON数据》文中的代码进行比较。
1.Json2.php
8