需要使用 JQuery 和 AJax 的基本帮助。我有一个ul
<div id="topics">
<h1><a href="index.html">JQuery</a></h1>
<h3>A Working Primer</h3>
<ul>
<li><a href="articles/includingJQuery.html">Including JQuery</a></li>
<li><a href="articles/tools.html">Tools of the Trade</a></li>
</ul>
</div>
一个空的 div,我喜欢将 Ajax 内容加载到与上面相同的页面上:
<div id="articles">
</div>
和我的脚本
$(document).ready(function(){
$("#topics ul li a").click(function(){
$('#articles').load('');
return false;
});
});
不确定要在负载中放入什么,因此它是动态的。感谢任何帮助:)
如果内容位于
href
属性位置,那么您需要获取该属性的值:
$('#articles').load(this.href);
所以试试这个:
$(document).ready(function(){
$("#topics ul li a").click(function() {
// use the content of the href attribute
// for the load parameter
$('#articles').load(this.href);
return false;
});
});
$('#articles').load($(this).attr('href'));
尝试一下......
使用
$('#articles').load($(this).attr('href'));
大概可以工作,但最终你会加载整个远程文档,包括重复的头/正文标签。
要变得更复杂,您可以在 .load() 中指定一个回调函数,并使用它来读取返回的内容,仅收集
<body>
元素的子元素,并将这些子元素插入到 #articles
元素中。
这听起来有点像您正在寻找的内容...以下函数调用 ASP.Net Web 服务。 然后,我使用从 Web 服务返回的 JSON 数据将 html 附加到我的元素。 我想您可能可以从这个示例中看到我在做什么并将其应用到您自己的代码中。 如果您需要我澄清任何事情,请告诉我。
$(function () {
$.ajax({
type: "POST",
data: "{}",
datatype: "json",
url: "../webServices/myTestWS.asmx/testMethodTV",
contentType: "application/json; charset-utf-8",
success: function (msg) {
var len = msg.d.rows.length;
$('#sidetree').append('<ul id="treeview">');
for (i = 0; i < len; i++) {
$('#sidetree').append("<li><span class='expandable'>" + msg.d.rows[i].data + "</span></li>");
}
$('#sidetree').append('</ul>');
});
});
您必须构建每个包含的页面,使其具有相同的 div 名称,例如
#container
,您想要加载到 #articles
div 中的数据所在的位置。然后你可以简单地做:
$(document).ready(function() {
$("#topics ul li a").click(function() {
var url = $(this).attr('href');
$('#articles').load(url + ' #container');
return false;
});
});
这只会获取
#container
div 并排除所有您不需要的额外 html/body 标记,并且您不必处理回调函数。请参阅http://api.jquery.com/load/