使用Ajax傳遞表單數據

Question

我有一個頁面，可以打開另一個頁面的thickbox，其中包含一個表單。 但是，在提交該表單后（它將數據寫入數據庫），我需要thickbox的父頁面來更新表單的某些行（已更改的值）。

我一直在網上閱讀，但之前我從未真正嘗試過使用Ajax做類似的事情（我通常只使用jQuery load（））。 本質上，我的理論是我可以使用jQuery .submit（）函數，並具有一個回調函數，該函數接受發布值並將其傳遞到上一頁。 我不確定將值從回調函數中捕獲的表單傳遞到上一頁，盡管該表單顯示在thickbox中的頁面是另一頁。

任何幫助將不勝感激！

只是為了幫助說明頁面的外觀：

顯示詳細信息的表單位於thickbox下，單擊更新按鈕后，我希望有一種方法可以將新的詳細信息傳遞回該表單，而不必刷新整個頁面。

非常感謝，

Answer 1

好吧，有幾種方法可以做到，一種可能是找到thickbox打開的div，然后在其中找到iframe，理論上將根據您返回的方式顯示從服務器返回的數據，然后使用jQuery，提取數據並更新原始頁面。

另一種方法是僅通過thickbox的onClose事件上的主頁手動檢索更新的數據，如果iframe返回，則IMO浪費了調用。

但這一切都取決於服務器如何將數據返回到表單。

Answer 2

您可以做兩件事，首先，您可能想使用表單提交事件來觸發頁面上表單的更新：

$('#myThickboxForm').submit(function() {

    // take the data in one of the form fields
    var fieldInputData = $('#someThickboxFormField').val();

    // now update the other form using this value
    $('#pageForm').find('#aPageFormField').val(fieldInputData);

});

當thickbox關閉時，thickbox還會觸發“卸載”事件，您可以像這樣監聽該事件：

$('#TB_window').on('unload', someFunction);

var someFunction = function() {

    // do something when the thickbox closes

}