使用Ajax传递表单数据

Question

我有一个页面打开另一个页面的厚箱，其中包含一个表单。但是，在提交该表单（它将数据写入数据库）后，我需要厚箱的父页面来更新表单的某些行（已更改的值）。

我一直在网上阅读，但我以前从未尝试过使用Ajax这样的事情（我通常只使用jQuery load（））。基本上我的理论是我可以使用jQuery .submit（）函数并有一个回调函数，它接受post值并将它们传递给上一页。但我不确定是否将回调函数中捕获的表单中的值传递给前一页作为表单，尽管在厚箱中的页面上显示的是不同的页面。

非常感谢任何帮助！

只是为了帮助透视页面的样子：

显示详细信息的表单位于thickbox下，单击更新按钮后，我希望能够将新详细信息传递回该表单，而无需刷新整个页面。

非常感谢，

Answer 1

你有几种方法可以做到这一点，可以找到厚箱打开的div然后在那里找到iframe理论上显示从服务器返回的数据取决于你如何返回它然后使用jQuery你可以提取数据并更新原始页面。

另一种方法是通过厚盒的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);

});

你的胖箱在关闭时也会触发“卸载”事件，你可以听到这样的事件：

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

var someFunction = function() {

    // do something when the thickbox closes

}