Mockjs+Ajax實踐

須要完成的工做：利用mock js隨機生成數據，經過ajax請求，獲取這些數據並展現在網頁中。

一 mock js隨機生成數據

官方文檔中，Mock.mock( )，能夠說是mock的精髓所在。

Mock.mock( rurl?, rtype?, template|function( options ) )

根據數據模板生成模擬數據。

-rurl：當攔截到匹配rurl的Ajax請求時，根據數據模板template生成模擬數據，做爲響應數據返回。
-rtype：表示須要攔截的ajax請求類型，好比get、post、put、delete等。

//js部分

var testPath = '/born',     //匹配ajax操做的路徑
    testMethod = 'get';     //匹配ajax請求類型

let temp = {
    'list|5-10': [{
        'aid|+1': 1,
        'title|1-6': '我是標題 ',  //30字之內的標題
        'update_time|10000-99999':10000,
        'thumb':'@URL',     //隨機url地址
        'color'    : '@color', //隨機顏色
        'image':'@IMAGE("200x100")' //尺寸爲200*100的圖片
    }]
}

Mock.mock(testPath, testMethod, temp); //生成模擬數據

二 Ajax操做

點擊按鈕，獲取數據，並對HTML元素進行操做

//HTML部分
    <h3>==測試·準備請求ajax·測試==</h3>

    <p class="p"></p>
    <button>點我請求ajax</button>

    <article class="temp">
       <!--<a href="">
            <p class="title"></p>
            <img src="" alt="">
       </a>    -->
    </article>

    <article class="hide" id="module">
        <a href="">
            <p class="title"></p>
            <img src="" alt="">
        </a>
    </article>


//Ajax請求處理

$("button").bind('click',function(){
    $.ajax({
        url: testPath,
        type: 'get',
        dataType: 'json',
        timeout: 1000,
        success:function(data, status, jqXHR){
            fillTemplet(data, status, jqXHR);  //ajax請求成功，執行這些操做
        },
        error:function(req,status,err){
            console.log('some err')
        console.log('req',req);
        console.log('status',status);
        console.log('err',err);
        }
    })
});

三 DOM操做

採用了兩種方法，一種是直接在js中寫入HTML，包括元素、內容等，另外一種是克隆HTML模板，而後對其添加內容。推薦使用方法二，便於修改調試，符合內容、樣式、數據分離的規則。

//js部分

//方法一
function fillTemplet(data, status, jqXHR){
    let father = $('.temp');

    $.each(data.list,function(index,obj){

        //根據mock數據（temp）生成內容
        //直接寫入html
        let block = '<a href="'+ obj.thumb +'">'
                    + '<p class="title">'+ obj.title +'</p>'
                    + '<img src="'+ obj.image +'" alt="我是圖片">'
                    +'</a>'

        father.append(block);
    })
}

//方法二
function fillTemplet(data, status, jqXHR){
    let father = $('.temp');

    $.each(data.list,function(index,obj){
        //方法二，克隆HTML中寫好的module模板
        let child = $('#module').clone().removeAttr('id').removeClass('hide');
        child.children('a').attr('href',obj.thumb);
        child.find('p').text(obj.title).css('color',obj.color);
        child.find('img').attr('src',obj.image);
        father.append(child);
    })
}