2010-07-21 142 views
2

需要使用JQuery和AJAX的基本帮助。我有一个UL基本的JQuery帮助

<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; 
    }); 
}); 

不完全确定要在负载中放入什么,以确保其动态。任何帮助表示赞赏:)

回答

4

如果该内容位于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; 
    }); 
}); 
+0

谢谢帕特里克:)我喜欢从午餐回来,并有5个答案等着我,尤其是当他们几乎都是正确的。 – mdgrech 2010-07-21 16:50:35

+0

@mdgrech - 不客气。 :O) – user113716 2010-07-21 16:51:54

0
$('#articles').load($(this).attr('href')); 

试一下....

0

使用

$('#articles').load($(this).attr('href')); 

会隐约起作用,但最终会导致加载的整个远程文档,包括重复的头部/主体标签。要获得更复杂的结果,可以在.load()中指定一个回调函数,并使用它读取返回的内容,只收集<body>元素的子元素,然后将这些子元素插入到#articles元素中。

0

这有点听起来像你在找什么...以下函数调用ASP.Net Webservice。然后,我使用从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>'); 

    }); 
}); 
0

你必须每个页面包含具有相同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股利和排除所有你不希望其他HTML/body标签,你不必应付回调函数。见http://api.jquery.com/load/