iframe与div + jquery

Question

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

在我的主页面(main.php)上,我有不同形式的链接:form1.php,form2.php,form3.php.我需要链接的页面在main.php的一部分中打开,即在main.php的div或iframe中打开,而不刷新main.php.表单页面可以填充,删除,更新数据库.当我执行这些操作时,我不希望main.php刷新,只需要相应的表单页面.我的第一个选择是打开form1.php,例如在main.php的iframe中打开.当我提交表单时,只会刷新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'是您的表单控制器，它将返回要显示的 html 代码。

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

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

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

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