在ajax表、jsp和servlets中显示数据

Question

我有以下情况，我很难解决。 在图像中，我尝试做的是查找所选进程的文档并将它们显示在表格中。

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

对于选择下拉列表，这是我通过 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代码，在那里我得到我选择下拉IDPROCESOS的值，如果它给我带来了到目前为止的文档，我可以在控制台中显示它，但我想将它添加到表格中，但是当我点击搜索按钮时

 $(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 将找到的数据传递给表，谢谢您的时间。

单击搜索按钮时它在表格中的外观

Answer 1

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

演示代码：

 $(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>