如何將窗體值隱式傳遞給彈出窗口？

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 
       } 
      } 
     } 
    }); 
}); 

也許不是最好的解決辦法，但它在我跑的測試工作。