ajax - 通过 Ajax 加载内容

Question

好的，所以我对 ajax 和从外部加载内容还很陌生，如果对我的问题有任何见解，我将不胜感激。

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

<div id="#ajax-wrap"></div>

我目前有一个链接列表，它们都具有相同的类，我希望在单击时，空白 div 会进行滑动切换，然后从链接所在的页面加载内容。

关联：

<a href="always a different url" class="home-right"></a>

当前的 jQuery：

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

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

在此先感谢大家的帮助！

score 3 · Accepted Answer

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

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

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

});

score 1 · Accepted Answer

你可以简单地使用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");
    }
  });
});

score 0 · Accepted Answer

使用获取：

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

score 0 · Accepted Answer

尝试这个：

$(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");
            }
      });
    })

})

ajax - 通过 Ajax 加载内容

4 回答 4

Related

Reference