Question

我有两个属性表：

会话

ID
staff_id

员工

ID
姓名
名字

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

触发JavaScript的链接是：

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

这是CakePHP 3 View上的表格中的一个动作。 $ session-＆gt; 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的详细功能就是这个，它检索之前获得的$ session-＆gt; 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调用，这样当我想填充模态时，我实际上可以放入有意义的数据（例如John Smith而不是外键2）。

Answer 1

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

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

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

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

1 个答案: