如何将表单值无形地传递到弹出窗口中？

Question

我的页面上有一个记录网格，每条记录都有一个编辑按钮。单击编辑按钮会打开一个 Magnific Popup，使用 ajax 类型，并带有该行的编辑表单。我需要传入当前记录的数据，以便我可以用当前数据预填充表单字段。

我们最初通过 URL 传递字段 - 所以弹出锚点看起来像这样（使用 ColdFusion）：

<cfoutput><a class="editRecord" href="editRecord.cfm?recordID=#recordID#&field1=#field1#&field2=#field2#<img src="../images/edit_icon.png" /></a></cfoutput>

以及调用 magnific 弹出窗口的代码：

$('.editRecord').magnificPopup({
    type: 'ajax',
    preloader: false
});

但我们不想在 URL 中公开 ID。有什么方法可以传递字段值而不在 URL 中公开它们吗？

Answer 1

正在检查 Magnific Popup plugin documentation, you can find a section specific for the AJAX type。根据它，您可以使用 ajax 和 settings 属性添加 AJAX 选项：

ajax: {
  settings: null, // Ajax settings object that will extend default one - http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
  // For example:
  // settings: {cache:false, async:false}

您可以使用该选项通过 POST 方法而不是 GET 方法（默认）发送 AJAX，这样不会暴露 [=45] 中的字段=].

现在，您可以将它们作为 data- 属性，而不是在地址中添加参数，然后使用 .data().

将它们动态添加到调用中

HTML:

<cfoutput>
    <a class="editRecord" href="editRecord.cfm" data-recordid="RecID" data-field1="val1">
        <img src="../images/edit_icon.png" />
    </a>
</cfoutput>

和JavaScript初始化：

$('.editRecord').magnificPopup({
    type: 'ajax',
    preloader: false,
    ajax: {
        settings: {
            method: "POST",
            data: {
                recordID: $(this).data("recordid"),
                field1: $(this).data("field1"),
                // similar with the rest of the fields
            }
        }
    }
});

我在本地测试了该代码...但惨遭失败。就像 this 在 magnificPopup() 函数中不可用。我通过首先选择字段然后使用 each() 函数应用 Magnific Popup 插件来解决这个问题，如下所示：

$(".editRecord").each(function() {
    $(this).magnificPopup({
        type: 'ajax',
        preloader: false,
        ajax: {
            settings: {
                method: "POST",
                data: {
                    recordID: $(this).data("recordid"),
                    field1: $(this).data("field1"),
                    // similar with the rest of the fields
                }
            }
        }
    });
});

也许不是最好的解决方案，但它在我的测试中有效运行。

如何将表单值无形地传递到弹出窗口中？

How can I pass form values invisibly into a popup?

jquery

magnific-popup

data-sharing