如何将 Thymeleaf 中的值传递给 Ajax 调用

Question

我有这个表遍历日志列表。我想做一个ajax调用，所以当单击特定行时，它会获取单击的日志的ID并获取该日志的特定详细信息/信息，并将信息插入到模式中。我需要两件事的帮助，一是因为它是一个动态 url，我在 url 中得到了 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

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

您可以在您的td 上使用th:data 并在那里设置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 调用的地方。

一旦你让它工作，我相信你可以清理它......