在同一页面中拥有 ajax 表单和表格而不需要刷新的最佳方法是什么？答案

【问题标题】：What is the best approach to have an ajax form and table in the same page without the need to refresh?在同一页面中拥有 ajax 表单和表格而不需要刷新的最佳方法是什么？
【发布时间】：2025-12-10 20:05:03
【问题描述】：

在同一页面中拥有表单和表格的最佳方法是什么，其中表单具有将数据保存在数据库中的提交按钮 (ajaxsubmit)，并且表格应该显示数据而无需刷新页面？

我尝试调用$.load来获取表格，但是由于$.load函数在document.ready之后完成的问题而出现了一些问题

那么我应该使用 iframe 吗？或创建一个xml文件并将数据读入表中？

【问题讨论】：

$.load() 有什么问题？就目前而言，您的问题非常模糊。
问题是 document.ready 在 $.load 函数之前执行，因此 document.ready 中的代码没有应用于加载的 html，谢谢
@malkawi 这就是为什么 .live 和 .delegate 以及新的 .on 被发明出来的原因。

标签： jquery ajax submit form-submit ajaxform

【解决方案1】：

看看这个jQuery的ajaxForm和ajaxSubmit的解释：http://www.justwebdevelopment.com/blog/ajaxform-and-ajaxsubmit-options/

【讨论】：

非常感谢，但是在表单提交后我将如何加载数据表，应该使用 iframe 并在 ajaxsubmit 的回调中重新加载它？
首先使用 Ajax 的全部意义在于您不需要使用 iframe。在您提供给 ajaxsubmit 的回调中，您使用返回的数据更新 dom。

【解决方案2】：

要在$.load() 方法完成后执行代码，您需要将其放在对load() 的调用的callback 中。

例如：

$("#myElement").load(
    '/location/of-target.html',
    function(data) {
        // put code here to execute after the load has completed.
        // for example to append a specific div.
        $(data).find("#myDiv").appendTo("#containerDiv");
    }
);

Further reading here

【讨论】：

但是我不能在回调和document.ready中执行相同的函数，否则，绑定到点击的代码代码会在点击时执行两次，对吧？