JSON 上級パート 2 AJAX で JSON データを渡す方法_PHP チュートリアル

前回の記事「JSON 上級パート 1: PHP と JavaScript での JSON の使用」では、PHP と JavaScript で JSON 型データを使用する方法を説明しました。この記事では、AJAX を使用して JSON データを取得し、タイトルとプロンプト ステートメントを動的に生成する方法を紹介します。このテクノロジーは、静的ページが Web サイトの背景から動的データを要求する場合に、より効果的です。Web サイトのホームページへのアクセス数が比較的多いため、ページ全体を静的に処理する必要がありますが、このページ上の一部のデータは実際に更新する必要があります。この場合、AJAX を静的ページで使用して、バックグラウンドでリアルタイムに生成された JSON データをリクエストすることができます。 AJAX テクノロジの詳細については、「PHP Access MySql データベース - 高度な AJAX テクノロジ」を参照してください。AJAX を使用して JSON データを転送する方法について詳しく説明します。



このサンプルプログラムは json2.php と json2.html に分かれており、json2.html にボタンがあり、これを押すと json2.php が返すデータを取得するための AJAX リクエストが送信されます。

1. json2.php

[php]
// 投稿者 MoreWindows( http://blog.csdn.net/MoreWindows )
$article_array = 配列(
「カウント」 => 3、
配列(
"id"=>"001"、
"title"=>"PHP を使用して MySql データベースにアクセスする - 初級",
"リンク"=>"http://www.BkJia.com/kf/201112/115227.html"
)、
配列(
"id"=>"001"、
"title"=>"PHP が MySql データベースにアクセスする中級 Smarty テクノロジー",
"リンク"=>"http://www.BkJia.com/kf/201112/115229.html"
)、
配列(
"id"=>"001"、
"title"=>"PHP Access MySql データベース高度な AJAX テクノロジ",
"リンク"=>"http://www.BkJia.com/kf/201112/115230.html"
)、
); $article_json = json_encode($article_array); エコー $article_json
?>
2. Json2.html

[html]

<スクリプトタイプ="text/javascript"> // プロンプトを表示
関数 OnMouseEnterDivInfo(thisObj, title)
{
$("#article_link").css("位置","絶対"); $("#article_link").css("left","20px"); $("#article_link").css("top",$(thisObj).offset().top + $(thisObj).height()); $("#article_link").html("リンクアドレス" + タイトル); $("#article_link").slideDown("高速"); $(thisObj).css("背景色","赤"); }
//プロンプトを非表示にする
関数 OnMouseLeaveDivInfo(thisObj)
{
$("#article_link").hide(); $(thisObj).css("背景色","黄色"); }
//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']; vardetailhtml = ""; for (var i = 0; i             {
                var divhtml = '

'; 
                divhtml += '

' + g_jsonstr[i]['タイトル'] + '

'; 
                divhtml += '

'; 
                詳細html += divhtml; 
            }
            $("#detail").html(detailhtml);// 新しい标题領域の生成
            $("#detail").slideDown("遅い"); 
        }); 
    }); 
});