iframe 与 div + jquery

Posted 2023-03-05

【中文标题】iframe 与 div + jquery

【英文标题】：iframe versus div + jquery

【发布时间】：2011-10-19 05:06:18

【问题描述】：

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

在我的主页 (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 刷新的第二个选项是否有任何优势，即与不同浏览器的兼容性等等...... 谢谢。

【参考方案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/，他们有一个很棒的参考表。

【讨论】：

我一直在尝试您的代码，但有几个问题：有没有办法检查表单的值是否已发布。通常，通过常规表单提交，我会通过显示以下值来检查项目是否已发布： 例如。我怎么能在这里做到这一点。另外，我不明白什么是“结果”？你能给我举个例子吗？我想做的一件事是在提交表单后，页面 form1.php 将刷新以以不可编辑的形式显示字段值，例如：email=[e-mail]，国家：美国等...

有很多方法可以检查它，如果你想在服务器端检查它，你可以使用$_POST['email']变量和一些正则表达式函数。或者，如果您想检查它们是否不是null，请使用if($_POST['email'])，如果您想在客户端执行此操作，它会更快，因为它会在提交之前检查字段，但是，这可以很容易地绕过，所以总是实现服务器端检查。

“结果”只是从 form1.php 脚本生成的 html 代码。例如if($_POST['name']) echo 'form submitted'。这个 sn-p 将生成一个文本“提交的表单”，它是 result 变量，它将通过 XMLHttpRequest 动态刷新

总而言之，您需要进行如上所示的表单验证，并echo 得到您想要的结果。请记住，除非必要，否则请避免在 php 文件中回显 html 标签，只需将它们包含在您的主 html 文件中即可。它不会造成任何伤害，但通常是一种不好的做法

感谢您的宝贵时间。我不知道出了什么问题，但我无法让它工作。

【参考方案2】：

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

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

参考：.load() | jQuery API Documentation

【讨论】：

@Umur Kontacı 你能解释一下你为什么在上面这么说吗？ “您无法访问 main.php 中的 iframe”

多么巧妙的方法！