iframe 与 div + jquery

Question

我想知道什么更适合我想要实现的目标：

在我的主页 (main.php) 上，我有指向不同表单的链接：form1.php、form2.php、form3.php。我需要在 main.php 的一部分中打开链接页面，即在 main.php 上的 div 或 iframe 中打开，而不刷新 main.php。表单页面可以填充、删除、更新数据库。当我执行这些操作时，我不希望 main.php 刷新，而只刷新适当的表单页面。 我的第一个选择是在 main.php 的 iframe 中打开 form1.php。当我提交表单时，只有 iframe 中的 form1.php 被刷新。 我的第二个选择是使用 jquery：在 main.php 的 div 中打开链接 (form1.php)。 在 div 内提交表单，只刷新 div。

第二个选项要求更高，因为我对 ajax 和 jquery 没有太多经验。第一个选项对我来说更直接。 我想知道与 iframe 相比，使用带有 div 刷新的第二个选项是否有任何优势，即与不同浏览器的兼容性等等...... 谢谢。

Answer 1

我建议使用 jquery、ajax(XMLHttpRequest)。 iframe 是旧的，不是语义的，您无法访问 main.php 中的 iframe。

$("#submit_button_id").click(function(e) {
    e.preventDefault();
    $.post('form.php', $("#form_name").serialize(), function(result) { 
        $("#div_id").html(result); } }

这个 sn-p 应该可以工作了。
$("#submit_button_id").click(function(e) { : 捕获分配的 id 的点击函数并创建一个触发器。

e.preventDefault(); : 阻止表单定期提交，我们将通过jquery提交。

$.post 以POST 方法发送表单。

'form.php' 是您的表单控制器，它将返回要显示的 html 代码。

("#form_name").serialize()这个函数是一个用于序列化要发送的表单的实用程序。它加载输入字段并将它们转换为喜欢{ field1: value, field2: value }

function(result) { 是第三个参数，成功时，$.post 调用第三个参数作为函数。我们创建一个匿名函数来替换 div 的 html。

$("#div_id").html(result) 将分配的 div 的 html 设置为 result 变量。

参考http://api.jquery.com/，他们有一个很棒的参考表。

Answer 2

从 jQuery 尝试$("#div").load("form.php");

此方法是从服务器获取数据的最简单方法。它大致相当于 $.get(url, data, success) ，只是它是一个方法而不是全局函数，并且它具有隐式回调函数。当检测到响应成功时（即 textStatus 为“success”或“notmodified”时），.load() 将匹配元素的 HTML 内容设置为返回的数据。

参考：.load() | jQuery API Documentation