通过Ajax加载内容

好吧，所以我对ajax和外部加载内容都很陌生，并希望对我的问题有所了解。

我目前有一个隐藏的div为空，其中ajax内容应该在单击链接后加载。

我目前有一个链接列表，这些链接都具有相同的类，我希望在单击时，空白div执行幻灯片切换，然后从链接所在页面加载内容。

链接：

当前的jQuery：

 $("a.home-right").click(function () { $('#ajax-wrap').slideToggle(); }); 

由于我是Ajax新手并加载外部内容，我想知道如何从#content标记中的内容链接页面加载内容。 基本上，我想要一个.home-right链接， #ajax-wrap会滑动切换，然后Ajax会从链接页面中提取内容（这总是一个不同的随机链接），它是#content div，将该内容放在#ajax-wrap 。

在此先感谢任何帮助人员！

Answer 1

您想为链接设置ajax 。 要求：

1. 为链接编写处理程序。
2. 当有人点击链接（重定向到页面）时，我们必须取消浏览器的默认行为。
3. 删除从服务器收到的旧数据ajax并使#ajax-wrap新鲜。
4. 通过ajax加载远程页面并将其设置为#ajax-wrap 。
5. 现在滑下来。

---

 // Document Ready $(function () { // attaching click handler to links $("a.home-right").click(function (e) { // cancel the default behaviour e.preventDefault(); // get the address of the link var href = $(this).attr('href'); // getting the desired element for working with it later var $wrap = $('#ajax-wrap'); $wrap // removing old data .html('') // slide it up .slideUp() // load the remote page .load(href + ' #content', function () { // now slide it down $wrap.slideDown(); }); }); }); 

Answer 2

你可以简单地使用这样的ajax ：

 $("a.home-right").click(function () { $.ajax({ type: "get", url: "YOUR URL HERE", success: function(data){ $('#ajax-wrap').html(data); $('#ajax-wrap').slideToggle(); }, error: function(){ alert("An error occured"); } }); }); 

Answer 3

试试这个：

 $(function(){ $("a.home-right").click(function () { $('#ajax-wrap').slideUp(); var url = $(this).attr("href") $.ajax({ type: "get", url: url, success: function(msg){ $('#ajax-wrap').html(msg) $('#ajax-wrap').slideDown(); }, error: function(){ alert("An error occured"); } }); }) }) 

Answer 4

使用get ：

 // Inside click handler $.get('url_that_returns_data') .done(function(response){ var $response = $(response); $('#ajax-wrap').html($response.find('#content')).slideToggle(); });