JQuery模板不适用于$.get

Question

我正在用Jquery模板填充表。在此模板中，我需要通过ajax调用使用json文件进行填充。

$(document).ready(function() {
    var clientData;

    $.get("/webpro/webcad/lngetusuario", function(data, status){
        clientData = data;
        alert(clientData);
    });
    $("#clientTemplate").tmpl(clientData).appendTo("tbody");

});

<script id="clientTemplate" type="text/html">
    <tr><td> ${usuario} </td><td> ${nome} </td><td> ${setor} </td></tr>
     //{{tmpl($data) "#phoneTemplate"}}
</script>

url '/webpro/webcad/lngetusuario‘生成json文件。

这就是代码。我不明白这一点，因为在$.get语句中，变量clientData具有正确的json值，但是在$.get语句之外(在document.ready上)，变量clientData是空的。

有人能帮我吗？

Answer 1

这是一个回调的“特性”。

代码并不是按照您认为的顺序运行的：

$(document).ready(function() {
    var clientData;

    $.get("/webpro/webcad/lngetusuario", function(data, status){
        clientData = data; // This will be run when a response has been received from the server
        alert(clientData);
    });
   // This will run without waiting any reply from the server
    $("#clientTemplate").tmpl(clientData).appendTo("tbody");

});

以下是您需要的内容：

$(document).ready(function() {
    var clientData;

    $.get("/webpro/webcad/lngetusuario", function(data, status){
        clientData = data;
        alert(clientData);
        $("#clientTemplate").tmpl(clientData).appendTo("tbody");
    });

});

Answer 2

$.get()是异步的。因此，$().tmpl()在$.get()完成之前执行，导致clientData为空。要解决此问题，请将$().tmpl()放入$.get()回调中。这将确保只有在get请求完成时才会创建模板。就像这样

$.get("/webpro/webcad/lngetusuario", function(data, status){
    clientData = data;
    alert(clientData);
    $("#clientTemplate").tmpl(clientData).appendTo("tbody");
});