分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow
也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！
上一篇《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// by MoreWindows( http://blog.csdn.net/MoreWindows )$article_array = array( "count" => 3, array( "id"=>"001", "title"=>"PHP访问MySql数据库 初级篇", "link"=>"http://blog.csdn.net/morewindows/article/details/7102362" ), array( "id"=>"001", "title"=>"PHP访问MySql数据库 中级篇 Smarty技术", "link"=>"http://blog.csdn.net/morewindows/article/details/7094642" ), array( "id"=>"001", "title"=>"PHP访问MySql数据库 高级篇 AJAX技术", "link"=>"http://blog.csdn.net/morewindows/article/details/7086524" ),);$article_json = json_encode($article_array);echo $article_json;?>2．Json2.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"); $("#article_link").css("top",$(thisObj).offset().top + $(thisObj).height()); $("#article_link").html("链接地址" + title); $("#article_link").slideDown("fast"); $(thisObj).css("background-color","red"); }//隐藏提示function OnMouseLeaveDivInfo(thisObj){ $("#article_link").hide(); $(thisObj).css("background-color","yellow");} //jquery通过AJAX方式得到JSON数据$(document).ready(function(){ $("#GetDataBtn").click(function(){ $.post("json2.php", {}, function(data){ var g_jsonstr = JSON.parse(data); var ilen = g_jsonstr['count']; var detailhtml = ""; for (var i = 0; i < ilen; i++) { var divhtml = '<div id=\"div_' + i + '\" onmouseenter=\"OnMouseEnterDivInfo(this, \' '+ g_jsonstr[i]['link'] + '\');\" onmouseleave=\"OnMouseLeaveDivInfo(this);\" >'; divhtml += '<h1>' + g_jsonstr[i]['title'] + '</h1>'; divhtml += '</div>'; detailhtml += divhtml; } $("#detail").html(detailhtml);//生成新的标题区域 $("#detail").slideDown("slow"); }); });});</script><style type="text/css">div{ font-family:sans-serif;}</style></head> <body><input type="button" id="GetDataBtn" value="生成数据" /><div id="detail"></div><p><span id="article_link" style="display:none;z-index:100"></span></p></body></html>运行效果如下：
下一篇《JSON进阶第三篇 apache多域名及JSON的跨域问题（JSONP）》将展示JSON的跨域问题并给出解决方案。
转载请标明出处，原文地址：http://blog.csdn.net/morewindows/article/details/7206390
给我老师的人工智能教程打call！http://blog.csdn.net/jiangjunshow
