如何将窗体值隐式传递给弹出窗口？

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> 

和代码来调用荡气回肠弹出：

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

但是我们不想在URL中公开ID。有没有任何方法可以传递字段值而不会将它们暴露在URL中？

Answer 1

检查Magnific Popup plugin documentation，您可以找到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，这种方式不公开URL中的字段。

现在，您可以将它们设置为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酒店插件：

$(".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 
       } 
      } 
     } 
    }); 
}); 

也许不是最好的解决办法，但它在我跑的测试工作。