JSON进阶第二篇 AJAX方式传递JSON数据
上一篇《JSON進(jìn)階第一篇 在PHP與javascript 中使用JSON》示范了在PHP和javascript中如何使用JSON類型的數(shù)據(jù)，本篇將介紹用AJAX方式得到JSON數(shù)據(jù)從而動態(tài)生成標(biāo)題和提示語句。這種技術(shù)在靜態(tài)頁面向網(wǎng)站后臺請求動態(tài)數(shù)據(jù)時比較有效，因為網(wǎng)站首頁的訪問量比較大，整個頁面要靜態(tài)化處理，但這個頁面上的某些數(shù)據(jù)又要實時更新，這時就可以在靜態(tài)頁面中使用用AJAX來請求后臺實時生成的JSON數(shù)據(jù)。關(guān)于AJAX技術(shù)可以參考《PHP訪問MySql數(shù)據(jù)庫 高級篇 AJAX技術(shù)》，這里詳細(xì)介紹如何使用AJAX來傳遞JSON數(shù)據(jù)。
?
本示例程序分為json2.php和json2.html， json2.html上有個按鈕，按下后將發(fā)送AJAX請求得到j(luò)son2.php返回的數(shù)據(jù)。
1．json2.php
<?php // by MoreWindows( http://blog.csdn.net/MoreWindows ) $article_array = array("count" => 3,array("id"=>"001","title"=>"PHP訪問MySql數(shù)據(jù)庫 初級篇", "link"=>"http://blog.csdn.net/morewindows/article/details/7102362"),array("id"=>"001","title"=>"PHP訪問MySql數(shù)據(jù)庫 中級篇 Smarty技術(shù)", "link"=>"http://blog.csdn.net/morewindows/article/details/7094642"),array("id"=>"001","title"=>"PHP訪問MySql數(shù)據(jù)庫 高級篇 AJAX技術(shù)", "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數(shù)據(jù) $(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);//生成新的標(biāo)題區(qū)域$("#detail").slideDown("slow");});}); }); </script> <style type="text/css"> div {font-family:sans-serif; } </style> </head> <body> <input type="button" id="GetDataBtn" value="生成數(shù)據(jù)" /> <div id="detail"> </div> <p><span id="article_link" style="display:none;z-index:100"></span></p> </body> </html>運行效果如下：
下一篇《JSON進(jìn)階第三篇 apache多域名及JSON的跨域問題（JSONP）》將展示JSON的跨域問題并給出解決方案。
?
轉(zhuǎn)載請標(biāo)明出處，原文地址：http://blog.csdn.net/morewindows/article/details/7206390
轉(zhuǎn)載于:https://www.cnblogs.com/long12365/p/9731303.html
總結(jié)
以上是生活随笔為你收集整理的JSON进阶第二篇 AJAX方式传递JSON数据的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 那些年，我们追过的java8
- 下一篇： 《精通Spring4.X企业应用开发实战