Mock.js演示Ajax请求


     <div>
         <h1 id="yourId">ClickHere</h1>
     <div>

    <script src="http://mockjs.com/dist/mock.js"></script>
    <script type="text/javascript">
        //调用mock方法模拟数据
        Mock.mock(
            'http://yourmind', {
		'user|1-5':[{
		"id"       : '@id',
                "userName" : "@name",                   //模拟名称 @name
                "age|1-100": 100,                       //模拟年龄(1-100)
		"birthday" : '@DATETIME("yyyy-MM-dd HH:mm:ss")',     //生日
                "color"    : "@color",                  //模拟色值
                "date"     : "@date('yyyy-MM-dd')",     //模拟时间
		"city"	   : "@city(true)",		//中国城市
                "url"      : "@url()",                  //模拟url
                "content"  : "@cparagraph()",            //模拟文本
                "imgUrl"   : Mock.Random.dataImage('50x20', Mock.mock({'regexp': /\w{4}/}).regexp),
                'randomId|10000000000-19900000000': 1560197834413,
                'operator|1': [
                        '移动',
                        '联通',
                        '电信'
                    ],
                'img':Mock.Random.image('200x100', '#50B347', '#FFF', 'png', '@name'),
                "title": '@ctitle',
                "isPublish": '@boolean',
                'now|+1':'@now("yyyy-MM-dd")',
            }]
        });

        //模拟Ajax请求
        $("#yourId").click(function(){
            $.ajax({
                url        : "http://yourmind",    //请求的url地址
                dataType   : "json",             //返回格式为json
                async      : true,               //请求是否异步,默认为异步
                data       : {},                 //参数值
                type       : "GET",              //请求方式
                beforeSend : function() {
                    //请求前的处理
                    //console.log("beforeSend");
                },
                success: function(req) {
                    //请求成功时处理
                    console.log(req);
                    $('#yourImageBtn').attr('src',req.imgUrl);
                },
                complete: function() {
                    //console.log("complete");
                    //请求完成的处理
                },
                error: function() {
                    //请求出错处理
                    //console.log("error");
                }
            });
        });
    </script>

猜你喜欢

转载自blog.csdn.net/qq_39822451/article/details/89360130