jQuery和servlet $ .post()

时间:2014-02-27 17:56:06

标签: javascript jquery servlets post

我会尝试解释我的问题。

我有一个按钮可以在桌面上创建一个新行,这里是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响应(可变数据)的数据时,直到我按下按钮两次或添加警报才会起作用在这样的反应之后:

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

抱歉我的英文不好,希望你能理解。帮帮忙!!

1 个答案:

答案 0 :(得分:0)

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

如果您打算在后面的代码中使用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)  

        });    

    })