Question

我的页面中有两个div。第一个div包含一个有两个选项的导航栏。我想要做的是当我点击导航栏中的一个选项时，我希望在第二个div中加载相应的html文件。我该怎么做。请帮助。

这是我目前的代码..

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Test Document</title>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

<script type = "text/javascript">
function loadSurveyPage()
{
alert("Survey");
$('#myBody').load('survey.html #myQuestions');
}

function howToSurvey()
{
alert("How to Survey");
$('#myBody').load('howToSurvey.html #myQuestions');
}
</script>
</head>
<body id="myBody">



<div data-role="page" id="indexPage">

<div  data-role="header" data-position="fixed">
<div data-role="navbar" id="navbar">
<ul>
    <li><a href="#" rel="external" onclick="howToSurvey()">How To Take The Survey</a></li>
    <li><a href="#" onclick="loadSurveyPage()">Take Survey</a></li>    
</ul>
</div>
</div>

<div data-role="content" id="myQuestions"></div>
</div>



</body>
</html>

当我点击选项时，我收到以下错误。

XMLHttpRequest无法加载file：/// C：/Users/sp05/Desktop/Self/TMS/testForTab/howToSurvey.html。 Access-Control-Allow-Origin不允许使用null。

Answer 1

您应该使用本地Web服务器进行开发（适用于Windows的f.ex.IIS）。您遇到的问题可能是安全问题。
您使用的是.load（）方法错误。 selector参数指向返回html上的元素。改为使用.get（）或.post（）：http://api.jquery.com/category/ajax/shorthand-methods/

Answer 2

我遇到了一些跨域问题...我在wamp服务器上运行了相同的项目，它工作得很好..

如何在jquery mobile中的div中插入外部html文件

2 个答案: