亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

javascript - The data in Vue is obtained through Ajax, and then Vue is instantiated. How to control the Ajax request to be executed first after the page is loaded, and then instantiate Vue after the request is successful?
曾經(jīng)蠟筆沒有小新
曾經(jīng)蠟筆沒有小新 2017-06-26 10:50:56
0
7
1030

The data in Vue is obtained through Ajax, and then Vue is instantiated.
How to control the Ajax request to be executed first after the page is loaded, and then instantiate Vue after the request is successful?

曾經(jīng)蠟筆沒有小新
曾經(jīng)蠟筆沒有小新

reply all(7)
習(xí)慣沉默

The onload event is bound to the Ajax request, and Vue is instantiated in the successful callback.

伊謝爾倫

I saw a similar question on Baidu yesterday.
I would like to ask where it came from?

Want to know why you do this?

My answer is: This is not recommended.

滿天的星座

You can request in created,

It is best not to let the page wait for requests, otherwise it will be blank,

When creating, if you still can’t get the result after being mounted, you can request a loading animation

Don’t let the page wait for the request before rendering. If the user’s Internet speed is not good and the loading animation is not visible but a blank page, the first thing that will come to mind is the problem with the website. Only if there is a loading animation will you know that it is waiting for the request

Use loading animation to make it easier for users to understand

某草草
$.ajax({
    url: "...", 
    ...
    success: function(){
        active();
    }
});

function active(){
     let app=new Vue({
        data:{
        },
        ...
    })
}

Just wait until the request is successful, then execute the function and instantiate vue!

學(xué)習(xí)ing

Actually, this is a very common requirement.

Vue can be instantiated at the first time. At this time, the data can have no value. A prompt such as loading or "loading" will be displayed on the interface. At the same time, a data request will be initiated in the created hook of the instance. After getting the data Just assign a value to the instance, vm.data = ajaxData.

Peter_Zhu
$(document).ready(function() {
    $.ajax({
        type: "get",
        async: false,
        url: '',
        dataType: "JSONP",
        beforeSend: function(){
            $("#content .loading").html("數(shù)據(jù)加載中<img class='loading-gif' src='images/loading.gif'/>");
        },
        success: function (data) {
            if(data.orders.length != 0){
                $("#content .loading").empty();
                // 實(shí)例化
            }
            else{
                $("#content .loading").html("暫時(shí)沒有你的數(shù)據(jù)哦");
            }
        },
        error: function (message) {
            $("#content .loading").html("數(shù)據(jù)請(qǐng)求失敗,請(qǐng)稍候再試");
        }
    });
});

$(document).ready() means executing the function inside after the page is loaded.
Write some loading prompts in the beforeSend of jquery ajax. If success clears the prompts, then if there is data, it will be instantiated. If there is no data, it will prompt if it is not. It will also give prompts for request errors. This is the one I just wrote during my recent internship. I personally feel that it is quite complete.

阿神

This is not a technical issue, this is a product design issue. Maybe you should ask your product why it has such a design.

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template