jQuery and servlet $.post()

Question

我会试着解释我的问题。

我有一个按钮可以在表上创建新行，这是 JavaScript 代码：

$("#btnAgregarCuentasHost").click(function(){
        $.post("AccionesHost.html", { accion:"retornarHosts", indice:"0"}, function(datos) {
                opciones=datos;
            });
        var filas = idDisponibleCuentasHost();
        var tags = '<select id="hostCuentasHost'+filas+'" name="hostCuentasHost'+filas+'" class="NclsAnchoTotal" >'+opciones+'</select>';
        var strNueva_Fila='';
        strNueva_Fila='<tr>'+
        '<input type="hidden" name="idCuentasHost'+filas+'" id="idCuentasHost'+filas+'" value=""/> ' +
        '<td><input type="text" name="cuentaCuentasHost'+filas+'" id="cuentaCuentasHost'+filas+'" value="" class="NclsAnchoTotal" /></td>'+
        '<td><input type="text" name="descripcionCuentasHost'+filas+'" id="descripcionCuentasHost'+filas+'" value="" class="NclsAnchoTotal" /></td>'+
        '<td>'+tags+'</td>'+
        '<td><input type="text" name="cantServiciosCuentasHost'+filas+'" id="cantServiciosCuentasHost'+filas+'" readonly="true" value="" class="" style="background-color:#F7819F;" /></td>'+   
        '<td align="right"><input type="button" id="btnBorrarCuentasHost'+filas+'" name="btnBorrarCuentasHost'+filas+'" value="" class="clsEliminarFilaCuentasHost" /></td>'+
        '<td align="right"><input type="button" value="" name="btnGuardarCuentasHost'+filas+'" id="btnGuardarCuentasHost'+filas+'" class="clsBtnGuardarCuentasHost" /></td>'+
        '</tr>';
        var objTabla=$(this).parents().get(3);  
        $(objTabla).find('tbody').append(strNueva_Fila);
        $("#jQueryTabs1").animate({height: '+=35px',},500)
        $("#jQueryTabs2").animate({height: '+=35px',},500)      
        })

和我在servlet上的JAVA方法：

private String retornarHosts(Document doc)
{
    String hosts="";
    List<Element> cabeceras = doc.getRootElement().getContent();
    for(Element e : cabeceras)
    {
        hosts+= "<option>"+e.getChild("host").getValue().trim()+"</option>";
    }
    return hosts;
}

它工作正常，但最大的问题是当我第一次按下按钮时，因为当我尝试使用来自 servlet 响应（变量 datos）的数据时，它不起作用，直到我按两次按钮或在响应后添加警报如下：

    $.post("AccionesHost.html", { accion:"retornarHosts", indice:"0"}, function(datos) {
            opciones=datos;
        });
        **alert("something");**
    var filas = idDisponibleCuentasHost();

对不起，我的英语不好，希望你能理解。 请帮忙！！

Answer 1

我想你的意思是把所有这些行都放在帖子后调用的函数中？ 警报工作意味着您实际上正在暂停内容流，并且在关闭警报之前，它下面的代码不会继续。 这通常表示您的代码旨在同步工作，同时等待异步数据。

如果您打算在下面的代码中使用opciones=datos作为服务器响应，那么您也需要它在函数中。

像这样：

$("#btnAgregarCuentasHost").click(function(){

    // store a reference to the table we are updating, this happens when a user clicks the button
    var objTabla=$(this).parents().get(3);
    // send a POST request to the server
    $.post("AccionesHost.html", { accion:"retornarHosts", indice:"0"}, function(datos) {
            // all of this happens after the server sends it's response
            opciones=datos;
            var filas = idDisponibleCuentasHost();
            var tags = '<select id="hostCuentasHost'+filas+'" name="hostCuentasHost'+filas+'" class="NclsAnchoTotal" >'+opciones+'</select>';
            var strNueva_Fila='';
            strNueva_Fila='<tr>'+
            '<input type="hidden" name="idCuentasHost'+filas+'" id="idCuentasHost'+filas+'" value=""/> ' +
            '<td><input type="text" name="cuentaCuentasHost'+filas+'" id="cuentaCuentasHost'+filas+'" value="" class="NclsAnchoTotal" /></td>'+
            '<td><input type="text" name="descripcionCuentasHost'+filas+'" id="descripcionCuentasHost'+filas+'" value="" class="NclsAnchoTotal" /></td>'+
            '<td>'+tags+'</td>'+
            '<td><input type="text" name="cantServiciosCuentasHost'+filas+'" id="cantServiciosCuentasHost'+filas+'" readonly="true" value="" class="" style="background-color:#F7819F;" /></td>'+   
            '<td align="right"><input type="button" id="btnBorrarCuentasHost'+filas+'" name="btnBorrarCuentasHost'+filas+'" value="" class="clsEliminarFilaCuentasHost" /></td>'+
            '<td align="right"><input type="button" value="" name="btnGuardarCuentasHost'+filas+'" id="btnGuardarCuentasHost'+filas+'" class="clsBtnGuardarCuentasHost" /></td>'+
            '</tr>';
            // update the new HTML
            $(objTabla).find('tbody').append(strNueva_Fila);
            // show the animations
            $("#jQueryTabs1").animate({height: '+=35px',},500)
            $("#jQueryTabs2").animate({height: '+=35px',},500)  
        });    
    })