Javascript:如何在使用 Ajax 进行数据库查询后连接模板

Question

我有这个代码:

$("#addField1").on('click',function(){
        var tipo_proveedor_id = $("[name=tipo_proveedores_id]").val();
        var proveedor_id = $("[name=proveedores_id]").val();
        if(tipo_proveedor_id.length && proveedor_id.length ){
             var target = document.getElementById("proveedoresDiv");
             var template = '';
            $.get('/tipo-proveedor/'+tipo_proveedor_id+'', function(response){
                var data = response.response;
                alert(data[0].tipo)
                template += '<b>Tipo de proveedor:<br/><input class="form-control m-t-sm" type="text" name="tipo_proveedores_id[]" value="'+data[0].tipo+'readonly><br/>'
            });
            $.get('/proveedor/'+proveedor_id+'', function(response){
                var data = response.response;
                alert(data[0].nombre_compania_p)
                template += 'Proveedor:<br/><input class="form-control m-t-sm" type="text" name="proveedores_id[]" value="'+data[0].nombre_compania_p+'" readonly>'     
            });
            alert(template)
            target.innerHTML = target.innerHTML + template;
    }

我有一个template连接 ajax 调用的 bd 结果的变量，调用工作正常，但不知道为什么它不连接结果，我显示 template 的内容与 alert()但它显示一个空字符串，这是怎么回事？请帮忙

Answer 1

您的 ajax 调用是异步的。在服务器响应之前，不会发生串联。然而，ajax 函数之外的代码将立即运行。警报发生在串联之前。试试这个吧

$("#addField1").on('click',function(){
    var tipo_proveedor_id = $("[name=tipo_proveedores_id]").val();
    var proveedor_id = $("[name=proveedores_id]").val();
    if(tipo_proveedor_id.length && proveedor_id.length ){
         var target = document.getElementById("proveedoresDiv");
         var template = '';
        $.get('/tipo-proveedor/'+tipo_proveedor_id+'', function(response){
            var data = response.response;
            alert(data[0].tipo)
            template += '<b>Tipo de proveedor:<br/><input class="form-control m-t-sm" type="text" name="tipo_proveedores_id[]" value="'+data[0].tipo+'readonly><br/>'
            alert(template)
            target.innerHTML = target.innerHTML + template;            

        });
        $.get('/proveedor/'+proveedor_id+'', function(response){
            var data = response.response;
            alert(data[0].nombre_compania_p)
            template += 'Proveedor:<br/><input class="form-control m-t-sm" type="text" name="proveedores_id[]" value="'+data[0].nombre_compania_p+'" readonly>'     
            alert(template)
            target.innerHTML = target.innerHTML + template;           
        });

}