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

json

适用于现代 C++ 的 JSON。

项目地址：https://gitcode.com/gh_mirrors/js/json

免费下载资源

MoreWindows

18108人浏览 · 2012-01-17 10:14:21

MoreWindows · 2012-01-17 10:14:21 发布

上一篇《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 + '\"  οnmοuseenter=\"OnMouseEnterDivInfo(this, \' '+ g_jsonstr[i]['link'] + '\');\" οnmοuseleave=\"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

GitHub 加速计划 / js / json

下载

适用于现代 C++ 的 JSON。

最近提交(Master分支：4 个月前 )

f06604fc * :page_facing_up: bump the copyright years Signed-off-by: Niels Lohmann <mail@nlohmann.me> * :page_facing_up: bump the copyright years Signed-off-by: Niels Lohmann <mail@nlohmann.me> * :page_facing_up: bump the copyright years Signed-off-by: Niels Lohmann <niels.lohmann@gmail.com> --------- Signed-off-by: Niels Lohmann <mail@nlohmann.me> Signed-off-by: Niels Lohmann <niels.lohmann@gmail.com> 28 天前

d23291ba * add a ci step for Json_Diagnostic_Positions Signed-off-by: Harinath Nampally <harinath922@gmail.com> * Update ci.cmake to address review comments Signed-off-by: Harinath Nampally <harinath922@gmail.com> * address review comment Signed-off-by: Harinath Nampally <harinath922@gmail.com> * fix typo in the comment Signed-off-by: Harinath Nampally <harinath922@gmail.com> * fix typos in ci.cmake Signed-off-by: Harinath Nampally <harinath922@gmail.com> * invoke the new ci step from ubuntu.yml Signed-off-by: Harinath Nampally <harinath922@gmail.com> * issue4561 - use diagnostic positions for exceptions Signed-off-by: Harinath Nampally <harinath922@gmail.com> * fix ci_test_documentation check Signed-off-by: Harinath Nampally <harinath922@gmail.com> * address review comments Signed-off-by: Harinath Nampally <harinath922@gmail.com> * fix ci check failures for unit-diagnostic-postions.cpp Signed-off-by: Harinath Nampally <harinath922@gmail.com> * improvements based on review comments Signed-off-by: Harinath Nampally <harinath922@gmail.com> * fix const correctness string Signed-off-by: Harinath Nampally <harinath922@gmail.com> * further refinements based on reviews Signed-off-by: Harinath Nampally <harinath922@gmail.com> * add one more test case for full coverage Signed-off-by: Harinath Nampally <harinath922@gmail.com> * ci check fix - add const Signed-off-by: Harinath Nampally <harinath922@gmail.com> * add unit tests for json_diagnostic_postions only Signed-off-by: Harinath Nampally <harinath922@gmail.com> * fix ci_test_diagnostics Signed-off-by: Harinath Nampally <harinath922@gmail.com> * fix ci_test_build_documentation check Signed-off-by: Harinath Nampally <harinath922@gmail.com> --------- Signed-off-by: Harinath Nampally <harinath922@gmail.com> 29 天前