jquery中$.get和$.each中的理解

最新推荐文章于 2020-07-30 11:26:28 发布

原创最新推荐文章于 2020-07-30 11:26:28 发布 · 750 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用PHP生成JSON格式的二维数组并利用jQuery进行数据获取与展示的例子。通过PHP脚本创建包含汽车品牌及销量信息的数组，并将其转换为JSON格式返回。前端采用jQuery的$.get方法请求数据，并通过两次each循环遍历处理接收到的JSON数据，最终在页面上显示。

json.php如下

<?php
    echo $_GET['name'];//john
    echo $_GET['age'];//10
    $jarr=json_encode($arr);
    $cars = array
    (
        array("Volvo",22,18),
        array("BMW",15,13),
        array("Saab",5,2),
        array("Land Rover",17,15)
    );
    exit(json_encode($cars));
?>

test.html

<body>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script>
    function show() {
        $.get
        (
           "json.php",
            {name:"john",age:10},
            function (data) {
             //data=[["Volvo",22,18],["BMW",15,13],["Saab",5,2],["Land Rover",17,15]]
                var result = '';
                $.each(data, function(k, v) {
                    //k=0 v=["Volvo",22,18]
                    //k=1 v=["BMW",15,13]....
                    $.each(v,function(kk,vv){
                        //v=["Volvo",22,18]....
                        //kk=0 vv=Volvo
                        //kk=1 vv=22....
                        result +=kk+": "+vv+"<br/>";    
                    });
                });
                $("#test").html(result);
            },"json");

    }
</script>
<input type="button" onclick="show()">
<div id="test"></div>
</body>