jquery - 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); } }

这段代码应该可以工作。
$("#submit_button_id").click(function(e) { :捕获分配的 id 的点击功能并创建触发器。

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

$.post 在 POST 方法中发送表单。

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

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

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

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

引用http://api.jquery.com/ ，他们有一份很棒的引用表。