Question

我让此表遍历日志列表。我想进行ajax调用，以便在单击特定行时，它获取单击的日志的ID，并获取该日志的特定详细信息/信息，并将信息插入到模式中。我需要两件事的帮助，一件事-由于它是动态网址，因此我在网址中获取了unicode而不是实际的ID。我尝试在log.id周围添加[[]]，但这不起作用。我的第二个问题是我什至不确定我是否会将日志ID发送给ajax调用。有人可以让我知道我是否在正确的轨道上，或者如何摆脱unicode并转换url中的id？

<table class="table table-striped" data-toggle="table" data-show-toggle="true" data-classes="table-no-bordered" data-striped="true" data-search="true"  data-show-columns="true" data-pagination="true">
     <thead>
        <tr>
            <th>When</th>
            <th>Subject</th>
            <th>Notes</th>
            <th class="text-right"><a class="btn btn-default"><span class="fa fa-pencil"></span></a></th>
            <th class="text-right"><a class="trigger btn btn-default"><span class="fa fa-plus"></span></a></th>
        </tr>
     </thead>
     <tbody>
          <tr th:each="log : ${logs}">
              <td th:if="${log.time!=null}" th:text="${{#temporals.format(log.time,'MM/dd/yyyy HH:mm a')}}"></td>
              <td th:text="${log.subject}"></td>
              <td style="white-space: pre-wrap;" th:text="${log.notes}"></td>
              <td class="text-right"><a th:value="${log}" class="trigger-edit-log"><span class="fa fa-pencil"></span></a></td>
              <td class="text-right"><a th:href="@{|/delete/callLog/${log.id}|}"><span class="fa fa-trash"></span></a></td>
          </tr>
     </tbody>
</table>

在文档准备功能内部进行Ajax调用：

        $(document).on('click', '.trigger-edit-log', function (event) {
            event.preventDefault();
            console.log($('a').attr('id'));
              $.ajax({
                 url:"/callLogs/${{callLog.id}}",
                 data: "id="+ $('a').attr('id'),
                 success: function(data){
                     $('#editLog').append(data);
                     $('#editLog').html(data);
                     $('#modal-edit-log').iziModal('open');
                 }
              });
        });

    @RequestMapping(value = "/callLog/{id}")
    public String task(@PathVariable("id")CallLog callLog, Model model){
        model.addAttribute("callLog",callLog);
        return "redirect:/callLogs/client/" + callLog.getClient().getId();
    }

Answer 1

我不完全了解您的问题。根据我的理解，我正在尝试回答。

您可以在th:data上使用td并在那里设置CallLog.id的值。

<td class="text-right"><a th:value="${log}"  th:data-calllogid= ="${CallLog.id}"class="trigger-edit-log"><span class="fa fa-pencil"></span></a></td>

现在在您的JavaScript上，您可以按以下方式获取此值。

$(event.relatedTarget).data("calllogid");

希望这会有所帮助。

Answer 2

更改代码行：

<td class="text-right"><a th:value="${log}" class="trigger-edit-log"><span class="fa fa- pencil"></span></a></td>

具有以下内容：

<td class="text-right"><a href="#" class="trigger-edit-log" th:data-logId="${log.id}" onclick="getLogDetailsForId(this.getAttribute('data-logId'));"><span class="fa fa-pencil"></span></a></td>

并尝试使用此javascript：

function getLogDetailsForId(logId) {
	$.ajax({
	   url:"/callLogs/" + logId,
	   success: function(result){
		   $('#editLog').append(result);
		   $('#editLog').html(result);
		   $('#modal-edit-log').iziModal('open');
	}});
}

PS尝试一下，然后检查URL是否正确，如/ callLogs /等。还要检查是否需要发布/获取ETC ...

因此，您更改html / thymeleaf并将日志ID传递到javascript函数getLogDetailsForId（....）中，这就是您进行Ajax调用的地方。

一旦它能正常工作，我相信您可以清理它...

如何将值从Thymeleaf传递到Ajax调用

2 个答案: