jQuery mock.js模拟的使用 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/mock.js" type="text/javascript" charset="utf-8"></script>
    </head>

    <body>
        <div class="box"></div>
        <script type="text/javascript">
            $(function() {
                Mock.mock('/mockTest', {
                    "userInfo|100": [
                        {   //生成|num个如下格式名字的数据
                            "id|+1": 1, //初始值是1每次id都+1
                            "name": "@cname", //名字为随机中文名字
                            "age|18-58": 25, //年龄为18-28之间的随机数字
                            "sex|1": ["男", "女"], //性别是数组中的一个，随机的
                            "job|1": ["web", "UI", "python", "php", "java", "go", "ios", "andios", "bootstrap", "jquery", "javascript", "html5", "CSS3"], //工作是数组中的一个
                            "img_info|3":Mock.Random.image('100x100'),
                            "ListInfo|3":[{
                                  "img":Mock.Random.image('100x100')
                            }]
                        }
                    ]
                })

                //ajax接收数据，通过jq
                $.get('/mockTest', function(data) {
                    console.log(data)
                    var users = JSON.parse(data);
                    var html="";
                    $.each(users.userInfo, function(index,item) {
                        html += '<div><span>'+item.id+'</span>---'+
                                ' <span>'+item.name+'</span>---'+
                                ' <span>'+item.age+'</span><div>';
                    })
                    
                    $(".box").append(html);
                })
            })
        </script>
    </body>

</html>

效果预览：

posted @ 2021-01-27 00:58  芳香四溢713051  阅读(320)  评论(0)  编辑  收藏  举报