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

来源：未知责任编辑：责任编辑发表时间:2015-01-01 13:15　点击:次

ASP PHP JSP JavaScript 网页设计 DIVCSS Ajax技术 HTML5

    $("#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>

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

相关新闻>>

今日头条

推荐热点

您可能感兴趣的文章

快速直达

新闻点评智问网络

新闻关注排行榜

WEB编程导航