Question

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Collapse content</title> 
<link rel="stylesheet"
href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs({
  collapsible: true
});
   $("#tabs-2").load("something.html");**
});
$(function() {
$( "#datepicker" ).datepicker({maxDate: new Date(1997,11,31)});
});

</script>
</head>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Alienware and Alpha</a></li>
<li><a href="#tabs-2">More About</a></li>
<li><a href="#tabs-3">Contact Us</a></li>
</ul>
<div id="tabs-1">
<p>blah blah</p>
</div>
<div id="tabs-2">

</div>
<div id="tabs-3">

</div>
</div> <br>
<div id="mini">
 <p><span class="italics">Please complete the form</span></p>
 <fieldset>
<form id="appForm" action="submit.php" method="post">
 **Some form details here (avoided to make the post more readable)
 </form>

</div>
</body>
</html>

这是我的something.html代码：

<html>
<head>
<title>Ajax tab 2 </title>
<meta charset="utf-8">
</head>

<body>
   <p>This is p2!!</p>
 </body>
</html>

我已经有了一个关于此的帖子，但没有一个建议是有用的。所以我正在制作另一个。 .load方法根本不会产生任何结果。最初我认为这是某种浏览器问题，因此我尝试了所有可能的浏览器，甚至在不同的操作系统上尝试过它只是为了确定。但它仍然无效。没有显示错误。事实上，tab2上显示的“something.html”（即“更多关于”）没有任何内容。简而言之，.load方法并没有真正加载'something.html'

中的任何内容

更新：解决方案：这在本地不起作用，当索引文件和'something.html'上传到服务器上时它可以正常工作

Answer 1

如果＆＃34; something.html＆＃34;是您自己创建的文件，可能会尝试将该文件作为标题中的链接<link href="something.html">包含在内。不确定它是否会起作用但是尝试一下。在处理jQuery Ajax时，通常url是服务器访问数据的地方。得到它？你可能有一个外部文件，所以你尝试如上所述。

Answer 2

当然有人在你的另一篇文章中提到了这一点......但你可能不得不把它放在$(document).ready(中。否则，javascript可以在加载#tabs-2元素之前执行。

$(document).ready(function(){
    $("#tabs-2").load("something.html");
});

查看documentation了解详情。

Answer 3

我对你的问题有一些注意事项：

如果您正在测试，使用文件协议运行文件（使用浏览器打开文件） AJAX （XMLHttpRequest）将无法在某些浏览器中运行，例如Chrome 。但是，如果您在 localhost 上启动本地服务器，则 AJAX 请求将正常运行。
加载部分内容时，不应将其包含为完整的HTML文档，因此请删除＆lt; html＆gt; 和＆lt; body＆gt; 包装部分内容。 something.html 只应包含：<p>This is p2!!</p>
如果您在＆lt; HEAD＆gt;中包含依赖于DOM元素的脚本那么您应该将defer属性添加到＆lt; script＆gt;标签，或移动您的＆lt;脚本＆gt; ＆lt; BODY＆gt;结束时的标签 OR 您应该在DOM准备就绪时将代码包装起来运行：

$(document).on("ready", function() { /* CODE HERE */ });
// Shorthand for $(document).ready()
$(function() { /* CODE HERE */ });

Jquery Ajax .load（）不是功能

3 个答案: