JSON进阶第二篇 AJAX方式传递JSON数据
来源:未知 责任编辑:责任编辑 发表时间:2015-01-01 13:15 点击:次
上一篇《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
[php]
<?php
// by MoreWindows( http://blog.csdn.net/MoreWindows )
$article_array = array(
"count" => 3,
array(
"id"=>"001",
"title"=>"PHP访问MySql数据库 初级篇",
"link"=>"http://www.2cto.com/kf/201112/115227.html"
),
array(
"id"=>"001",
"title"=>"PHP访问MySql数据库 中级篇Smarty技术",
"link"=>"http://www.2cto.com/kf/201112/115229.html"
),
array(
"id"=>"001",
"title"=>"PHP访问MySql数据库 高级篇AJAX技术",
"link"=>"http://www.2cto.com/kf/201112/115230.html"
),
);
$article_json = json_encode($article_array);
echo $article_json;
?>
2.Json2.html
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ajax方式请求json</title>
<script type="text/javascript" src="../jquery-1.7.min.js"></script>
<script type="text/javascript">
//显示提示
function OnMouseEnterDivInfo(thisObj, title)
{
$("#article_link").css("position","absolute");
$("#article_link").css("left","20px");
本示例程序分为json2.php和json2.html,json2.html上有个按钮,按下后将发送AJAX请求得到json2.php返回的数据。
1.json2.php
[php]
<?php
// by MoreWindows( http://blog.csdn.net/MoreWindows )
$article_array = array(
"count" => 3,
array(
"id"=>"001",
"title"=>"PHP访问MySql数据库 初级篇",
"link"=>"http://www.2cto.com/kf/201112/115227.html"
),
array(
"id"=>"001",
"title"=>"PHP访问MySql数据库 中级篇Smarty技术",
"link"=>"http://www.2cto.com/kf/201112/115229.html"
),
array(
"id"=>"001",
"title"=>"PHP访问MySql数据库 高级篇AJAX技术",
"link"=>"http://www.2cto.com/kf/201112/115230.html"
),
);
$article_json = json_encode($article_array);
echo $article_json;
?>
2.Json2.html
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ajax方式请求json</title>
<script type="text/javascript" src="../jquery-1.7.min.js"></script>
<script type="text/javascript">
//显示提示
function OnMouseEnterDivInfo(thisObj, title)
{
$("#article_link").css("position","absolute");
$("#article_link").css("left","20px");
相关新闻>>
- 发表评论
-
- 最新评论 更多>>