jQuery Ajax 获取json数据

2016-7-11 流沙团
常用方法load
getJSON
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>jQuery-Ajax</title>

    <style type="text/css">

        #details{

            width:400px;

            height: 300px;

            background-color: aliceblue;

            border: solid black 1px;

        }



    </style>



    <script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>



    <script type="text/javascript">

        $(function () {

            $('a').click(function(){

                var url = this.href;

                var args = {"time":new Date()};

                //url:

                //ages: JSON格式

                //function: 回调函数,当响应结束时,回调函数被触发,响应结果在data中

                $.getJSON(url,args,function(data){

                    var name = data.person.name;

                    var website = data.person.website;

                    var email = data.person.email;

                    $('#details').empty().append(name+"-"+website+'-'+email);

                });



                return false;

            });

        });



    </script>

</head>

<body>



<h1>people</h1>

<ul>

    <li><a href="json/andy.json">Andy</a></li>

    <li><a href="json/richard.json">Richard</a></li>

    <li><a href="json/jeremy.json">jeremy</a></li>

</ul>



<div id="details">





</div>



</body>

</html>
发表评论：