在 ajax table、jsp 和 servlet 中显示数据

Question

我有以下案例，我很难解决。在图像中，我尝试做的是查找 selected 过程的文档，并且它们显示在 table.

中

这是通过 ajax、jsp 和 servlet 完成的。

对于 select 下拉列表，这是我通过 java 和 jsp 类列出进程的代码.

<select class="form-control js-example-basic-single" name="sucursal">
  <% 
    MantenedorProcesosLMD md = new MantenedorProcesosLMD();
    List<procesoslmd> ld = md.listar_proc_lista(con);
    for (procesoslmd p : ld) {
  %>
    <option value="<%=p.getLDM_ID()%>">
      <%=p.getLDM_NOMBPROCESOS()%>
    </option>
  <%
    }
  %>
</select>

这是我在 sql 中的代码，我通过 IDPROCESOS 参数查找文档。

SELECT
  D.IDLDMDOCUMENTOS,
  LT.NOMBRETIPO,RTRIM(D.LDM_NOMENCLATURA) AS NOMENCLATURA,
  RTRIM(D.LDM_NOMBRE_DOCUMENTO) AS TITULO,
  D.LDM_FECHA_SUBIDA,D.LMD_RUTA_DOCUMENTO
FROM LDM_DOCUMENTOS_ D
LEFT JOIN LDM_PROCESOS_ LP ON LP.IDLDMPROCESOS = D.IDLDMPROCESOS
LEFT JOIN LDM_TIPO_DOCUMENTO_ LT ON LT.IDTIPODOC = D.IDTIPODOC
WHERE LP.IDLDMPROCESOS = @IDLDMPROCESOS

但到目前为止，我无法获得通过单击搜索按钮查找文档的代码，我正在尝试使用 ajax 我仍在收集信息。

执行此 ajax 代码，我可以在其中获取 select 下拉菜单 IDPROCESOS 的值，如果它给我带来了目前的文档，我可以展示它在控制台中，但我想将它添加到 table 但是当我单击搜索按钮时

$(document).ready(function () {
    $('select[name=procesoldm]').on('change', function () {
        $.ajax({

            type: 'GET',
            url: '../sv_proxdocumento',
            data: 'codigoproceso='+$('select[name=procesoldm]').val(),
            statusCode: {
                404: function () {
                    alert('PAGINA NO ENCONTRADA');
                },
                500: function () {
                    alert('ERROR EN EL SERVIDOR');
                }

            },
            
            success: function (dados) {
           
                var pegadatos  = dados.split(":");
                console.log(pegadatos);
                 for (var i = 0; i < pegadatos.length -1; i++){
                     
                     var codigodocumento  = pegadatos[i].split("-")[0];
                     var nombretipo  = pegadatos[i].split("-")[1];
                     console.log(nombretipo);
                     
                     
                   
                     
                 }
            }

        });


    })
});

如何通过 ajax 将找到的数据传递给 table，感谢您的宝贵时间。

单击搜索按钮时 table 中的外观

Answer 1

您可以在拆分值后使用另一个 for 循环，然后在每次迭代中使用 += 将 td 附加到某个变量中，然后将生成的 html 添加到您的 table.

演示代码 :

$(document).ready(function() {
  /*$('select[name=procesoldm]').on('change', function() {
    $.ajax({
    //other codes..
    success: function(dados) {*/
  //var pegadatos = dados.split(":");
  //just for demo
  var pegadatos = ["1-abc-abd-abdd-2/1/12", "2-abc2-abd2-abdd2-2/22/12", ""]
  var html = ""; //declare this
  //loop through main array
  for (var i = 0; i < pegadatos.length - 1; i++) {
    var values = pegadatos[i].split("-") //split values
    html += `<tr>`
    for (var j = 0; j < values.length; j++) {
      html += `<td>${values[j]}</td>` //splited values..
    }
    html += `<td>--Visitor--</td>`
    html += `</tr>`
  }
  $("table tbody").html(html) //add result inside tbody
  /*  }
    });
  })*/
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th>No</th>
      <th>DocumentType</th>
      <th>DocumentNaming</th>
      <th>title</th>
      <th>date</th>
      <th>visitor</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

在 ajax table、jsp 和 servlet 中显示数据

Show data in ajax table, jsp and servlets

javascript

ajax

jsp