通过Ajax加载内容

时间:2013-05-17 03:55:32

标签: ajax jquery

好的,所以我对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会从链接页面中提取内容(这将始终是一个不同的随机链接)并且它是{{ 1}} div,将该内容放在#content

提前感谢任何帮助人员!

4 个答案:

答案 0 :(得分:3)

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

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

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

答案 1 :(得分:1)

您可以像这样使用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");
    }
  });
});

答案 2 :(得分:0)

使用get

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

答案 3 :(得分:0)

试试这个:

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

})