使用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

}