CakePHP 3 和 JSON 响应 - 格式化与其他表链接的响应数据

Question

我有两个表及其属性：

会话

• 编号
• staff_id

员工

• 编号
• 名
• 姓氏

通过单击链接，我触发我的 JavaScript 代码打开一个模态，并发送 AJAX 调用以检索 JSON 格式的数据。然后，我使用 JSON 响应来填充我的模态。

触发 JavaScript 的链接是这样的：

<?= $this->Html->link(__('View'), ['action' => 'popup', $session->id], ['class' => 'view', 'data-id' => $session->id]) ?>

这是 CakePHP 3 View 上表上的一个操作。 $session->id 是根据单击链接的数据行决定的。Popup 是一个空的 CakePHP 3 函数，它只是方便了 JavaScript 的工作和模式开放。

触发模态的 JavaScript 如下所示：

<script type="text/javascript">
$(function () {
$('.view').click(function (ev) {
ev.preventDefault();
var sessionId = $(this).attr('data-id');
$('#viewModal').modal('show');
$.ajax({
url:"localhost/project/sessions/details/"+sessionId+".json",
type:'POST',
success:function(res) {
if(res) {
document.getElementById("prstaff").innerHTML = res.staff_id;
}
}
});
});
});
</script>

我的 CakePHP 3 SessionsController 的 details 函数是这样的，它检索之前获得的 $session->id 的相关数据：

public function details($id = null)
{
$details = $this->Sessions->get($id);
$this->set(array(
'output' => $details,
'_serialize' => 'output',
'_jsonp' => true
));
}

这是我的完整模态，然后打开：

<!-- Modal -->
<div class="modal fade" id="viewModal" tabindex="-1" role="dialog" aria-labelledby="viewModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h3 class="modal-title" id="viewModalLabel">Session Details</h3>
<br>
<table class="vertical table col-sm-2">
<tr>
<th>Staff Name:</th>
<td id="prstaff"></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close
</button>
</div>
</div>
</div>
</div>

然而，最终结果只是：

员工名称：2(或任何获取的外键)

这不是很有意义。我可以对 Staff 表进行另一个 AJAX 调用，但我不知道如何将其链接到第一个 AJAX 调用，以便当我想填充模态时，我实际上可以输入有意义的数据(例如。约翰·史密斯而不是外键 2)。

Answer 1

为什么你通过 AJAX 请求 JS，然后执行另一个查询来检索 JSON，然后想把它放到模态中？这很奇怪，没有必要。如果我理解正确的话。

1. 调用操作并直接返回模态的整个 HTML 内容，并让 Cake 将数据呈现到模板中，服务器端。这只是一个 AJAX 调用。
2. 有一个模板<script type="html/template" id="model-template">conten here</script>，单击执行 AJAX 调用并返回 JSON，并用于替换模板中{{somevar}}占位符并将结果放入模态中。这也只是一个 AJAX 调用。您可以使用 Mustache 轻松进行模板解析，它真的很小。

我个人更喜欢使用 JSON 响应和填充模板。