JSON进阶第二篇 AJAX方式传递JSON数据

Myth丶恋晨 2021-09-29 13:12 298阅读 0赞

上一篇《JSON进阶第一篇 在PHP与javascript 中使用JSON》示范了在PHP和javascript中如何使用JSON类型的数据，本篇将介绍用AJAX方式得到JSON数据从而动态生成标题和提示语句。这种技术在静态页面向网站后台请求动态数据时比较有效，因为网站首页的访问量比较大，整个页面要静态化处理，但这个页面上的某些数据又要实时更新，这时就可以在静态页面中使用用AJAX来请求后台实时生成的JSON数据。关于AJAX技术可以参考《[PHP访问MySql数据库 高级篇 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>

运行效果如下：

![0_1326766581uMST.gif][]

下一篇《[JSON进阶第三篇 apache多域名及JSON的跨域问题（JSONP）][JSON_ apache_JSON_JSONP]》将展示JSON的跨域问题并给出解决方案。

转载请标明出处，原文地址：[http://blog.csdn.net/morewindows/article/details/7206390][http_blog.csdn.net_morewindows_article_details_7206390]

转载于:https://www.cnblogs.com/long12365/p/9731305.html

[PHP_MySql_ _ AJAX]: http://blog.csdn.net/morewindows/article/details/7102362
[0_1326766581uMST.gif]: /images/20210725/b449e8da38cb487c81e1e77b871e704d.png
[JSON_ apache_JSON_JSONP]: http://blog.csdn.net/morewindows/article/details/7235992
[http_blog.csdn.net_morewindows_article_details_7206390]: http://blog.csdn.net/morewindows/article/details/7206390