javascript - Les données dans Vue sont obtenues via Ajax, puis Vue est instanciée. Comment contrôler que la requête Ajax soit exécutée d'abord après le chargement de la page, puis instancier Vue une fois la requête réussie ?
曾经蜡笔没有小新
曾经蜡笔没有小新 2017-06-26 10:50:56
0
7
876

Les données dans Vue sont obtenues via Ajax, puis Vue est instanciée.
Comment contrôler que la requête Ajax soit exécutée d'abord après le chargement de la page, puis instancier Vue une fois la requête réussie ?

曾经蜡笔没有小新
曾经蜡笔没有小新

répondre à tous(7)
習慣沉默

L'événement onload est lié à la requête Ajax et Vue est instanciée lors du rappel réussi.

伊谢尔伦

J'ai vu une question similaire sur Baidu hier.
Je voudrais demander d'où elle vient ?

Vous voulez savoir pourquoi vous faites cela ?

Ma réponse est : ce n’est pas recommandé.

滿天的星座

Vous pouvez demander en création,

Il est préférable de ne pas laisser la page attendre les demandes, sinon elle sera vide,

Lors de la création, si vous n'arrivez toujours pas à obtenir le résultat après montage, vous pouvez demander une animation de chargement

Ne laissez pas la page attendre la demande avant le rendu. Si la vitesse Internet de l'utilisateur n'est pas bonne et que l'animation de chargement n'est pas vue mais qu'elle est vide, la première chose à laquelle vous penserez est le problème avec le site Web. il y a une animation de chargement, vous saurez qu'elle attend la demande

Utilisez l'animation de chargement pour faciliter la compréhension des utilisateurs

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

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

Attendez simplement que la requête aboutisse, puis exécutez la fonction et instanciez vue !

学习ing

En fait, il s’agit d’une exigence très courante.

Vue peut être instanciée du premier coup, à ce moment data可以没有值,界面上展示loading或"正在加载"之类的提示,同时在实例的created钩子中发起数据请求,得到数据后给实例赋值就行了,vm.data = ajaxData.

Peter_Zhu
$(document).ready(function() {
    $.ajax({
        type: "get",
        async: false,
        url: '',
        dataType: "JSONP",
        beforeSend: function(){
            $("#content .loading").html("数据加载中<img class='loading-gif' src='images/loading.gif'/>");
        },
        success: function (data) {
            if(data.orders.length != 0){
                $("#content .loading").empty();
                // 实例化
            }
            else{
                $("#content .loading").html("暂时没有你的数据哦");
            }
        },
        error: function (message) {
            $("#content .loading").html("数据请求失败,请稍候再试");
        }
    });
});

$(document).ready() signifie exécuter la fonction à l'intérieur après le chargement de la page.
Écrivez quelques invites de chargement dans le beforeSend de jquery ajax. Si le succès efface les invites, alors s'il y a des données, elles seront instanciées. S'il n'y a pas de données, il vous demandera également si ce n'est pas le cas. erreurs. C'est celui que je viens d'écrire lors de mon récent stage. Je le trouve personnellement assez complet.

阿神

Ce n'est pas un problème technique, c'est un problème de conception de produit. Vous devriez peut-être demander à votre produit pourquoi il a un tel design.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!