使用ajax在JSP中填充表单

时间:2013-10-11 08:50:59

标签: ajax forms java-ee select fill

我知道已经提出过这类问题,但我完全是Ajax和JavaScript的新手。 我有一个字段(codigo_caso),我需要用于填写表单的启动器

<input id="codigo_caso" autofocus="autofocus" type="text" name="codigo_caso" value=""/>

我必须在失去对该字段的焦点后检索4个变量(如果其他4个为空,则返回1个变量) 检索这4个变量后的一个大问题是如何与它们很好地配合。

JSP网页 - &gt;脚本 这是我从互联网上复制并修改为接收一个字段的片段

$(document).ready(function() {
    $("#codigo_caso").blur(function() {
        var cod = $(this).val();
        var dataString1 = {"codigo":cod};
        $.ajax({
            type: "GET",
            url: "otros/codigoCasoDependienteNuevaTarea.jsp",
            datatype: "json",
            contentType: "application/json; charset=utf-8",
            data: dataString1,
            cache: false,
            success: function(response) {
                $(".linea_equipo").response("linea_equipo");
                $("#selectArea").filter(function() {
                    return $(this).response("id_area") === response("area");
                }).prop('selected', true);
                $(".listaCentros").response("nombre_centro");
                $("#listaRolNuevaTarea").filter(function() {
                    return $(this).response("id_rol") === response("rol");
                }).prop('selected', true);
            }
        });
     });
  });

这是我的JSP文件启动SQL [我需要恢复几个变量]。 我需要知道如何将这3个字段返回到我之前的JSP

JSP FILE - &gt; OTROS / codigoCasoDependienteNuevaTarea.jsp

String linea = "", centro = "", error = "No existe el caso indicado";
int area, rol;
Connection conex = (Connection) session.getAttribute("conexion");
Statement st = conex.createStatement();
String sql = "";
String cod = request.getParameter("codigo").toString();
if (cod != null && !cod.isEmpty() && !cod.equals("0")) {
    sql = "SELECT t1.linea_equipo,t1.id_rol, t2.id_area,t2.nombre_centro "
            + " FROM gen_casos_prisma t1 LEFT OUTER JOIN gen_centros t2 ON "
            + " t1.id_centro = t2.id_centro "
            + " WHERE "
            + " t1.CODIGO_CASO =  " + cod;
    ResultSet rs = st.executeQuery(sql);
    rs.beforeFirst();
    if (rs.next()) {
        linea = rs.getString("linea_equipo");
        area = rs.getInt("id_area");
        centro = rs.getString("nombre_centro");
        rol = rs.getInt("id_rol");

        JSONObject j = new JSONObject();
        j.put("linea_equipo", linea);
        j.put("id_area", area+"");
        j.put("nombre_centro", centro);
        j.put("id_rol", rol+"");


    } else {
        /* return variable error */
    }
    response.setContentType("application/json");

 }

知道如何接收这些字段后的下一步是知道如何处理它们。我知道如何将linea_equipo放在文本字段中[我在JAVA代码上方的脚本中发布的代码]但我还需要在每个列表中设置为“选中”一个选项(两个是下拉列表,另一个是数据主义者)考虑到它们已经填满;只需要将选定的属性放在与表单必须从此ajax-jsp事物接收的字段匹配的值中。 (selectArea - id_area,listaCentrosDeArea - nombre_centro,listaRolNuevaTarea - id_rol

<select id="selectArea" >
    <%out.print(f.getSelectAreas(conex));%>
</select>
<datalist id="listaCentrosDeArea" id="datalist1">
    <% //out.print(f.selectCentrosNOUser(conex, updateTarea));%>
</datalist>
<select id="listaRolNuevaTarea" name="rol">
    <% out.print(f.selectRolesNoUser(conex));%>
</select>

对不起,如果它看起来有点棘手或沉重,但我被要求这样做,我不知道。

2 个答案:

答案 0 :(得分:0)

当你做的时候

success: function(html) {
     ("#linea_equipo").val(html);
}

您要将值返回给JSP,因此请确保填写的所有元素都具有linea_equipo

之类的ID

答案 1 :(得分:0)

在代码的成功部分,您可以编写逻辑以将数据填充到表单中。

success: function(response)
{

$("#ID").val("value");//find these value from your response
// if your response is JSON you can replace value like response.key    
}

see what json is

通过jQuery选择下拉列表

$('#dropdownid').val('selectedvalue');

// ====== 用于在java servlet中以json的形式返回响应的代码

response.setContentType("application/json");
response.getWriter().write(jsonobject.toString());