iframe与div + jquery的比较

Question

iframe与div + jquery的比较

8

我想知道对于我想要实现的目标，哪个更合适：

在我的主页（main.php）上，我有链接到不同表格的表单：form1.php、form2.php、form3.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的经验，因此第二个选项更具挑战性。第一个选项对我来说更为直接。我想知道使用div刷新与iframe相比的优点，例如兼容不同的浏览器等等... 谢谢。

- JMarc

2个回答

1

尝试使用jQuery的$("#div").load("form.php");

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

参考资料：.load() | jQuery API文档

- user753676

@Umur Kontacı，您能解释一下为什么您说过：“您无法访问main.php中的iframe”吗？ - Chris22

多么巧妙的方法！ - ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Umur Kontacı · Accepted Answer

我建议使用jquery和ajax(XMLHttpRequest)。Iframes已经过时，不语义化，并且您无法访问main.php内的iframe。

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

这段代码应该可以正常工作。
$("#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/，他们有一份精美的参考资料表。