嗨，我正在使用jQuery UI标签作为表单。
因此，我不能使用Ajax，因为所有的选项卡/内容必须在发送表单时出现。该表单由9个不同的选项卡组成，每个选项卡都包含大量代码。
现在我想将这些选项卡的内容外包给每个单独的文件(tab1.php, tab2.php，…)。
我的解决方案:
-
我可以在
<head>中包含所有文件(tab1.php，…)，然后将每个内容加载为变量。我不喜欢这样，因为代码看起来很乱，因为所有的转义。 -
我使用iframe。帧只在点击时加载。
<div id="tab-1"> <iframe src="..."></iframe> </div>
有更好的方法吗?也许使用Ajax load-onceAll或类似的东西?也许有些东西可以防止iframe重新加载…我不知道。
您可以将代码外包给单个文件，然后在页面加载时使用Ajax jQuery调用提取其内容:
var tabs = [
{
url: 'tab1.php',
$ctrl: $('div#tab1')
},
{
url: 'tabN.php',
$ctrl: $('div#tabN')
}
];
for(var i = 0; i < tabs.length; ++i)
{
var data = $.ajax({
url: tabs[i].url,
async: false
}).responseText;
tabs[i].$ctrl.html(data);
}
然后，您可以在单个选项卡表单的onSubmit函数中使用一些验证，以确保它们在所有选项卡表单完成之前不会被发回。这只是一种可能的解决方案。
您是否已经尝试过使用jQuery动态添加选项卡的内容?我的意思是你用一个div加上id "tab1_div"然后用
$("#tab1_div").html("my html content for the tab-page");
如果可以，您可以使用$.get(...)通过Ajax获得选项卡的HTML。