加载内容通过Ajax [英] Loading Content Via Ajax

问题描述

好了，所以我pretty的新Ajax和加载的内容外，并会AP preciate任何了解我的问题。

我现在有一个隐藏分区是空的，其中的Ajax内容应该点击一个链接后，加载

 ＆LT; D​​IV ID =＃AJAX换行＆GT;＆LT; / DIV＆GT;
 

我公司目前拥有的所有具有相同类的，我想有一个链接列表，点击后的空白格做一个幻灯片切换，然后加载从页面的链接是内容。

链接：

 ＆LT; A HREF =总是不同的URL级=家庭权＆GT;＆LT; / A＆GT;
 

目前jQuery的：

  $（a.home右）。点击（函数（）{
$（'＃Ajax的包装）的slideToggle（）。
}）;
 

作为，因为我是新来的Ajax和加载外部内容，我想知道如何加载从链接的页面的房子在内容＃内容标签。所以基本上，我想一个。家里右链接，＃Ajax的包装将滑动切换，然后阿贾克斯将其拉离链接的页面（这是始终将是一个不同的随机链接）的内容和它的＃内容 DIV，把这些内容在＃ Ajax的包装。

在此先感谢您的帮助乡亲们！

解决方案

您要设置的 AJAX 的链接。要求：

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

---

  //文档就绪
$（函数（）{

    //附加单击处理程序链接
    $（a.home右）。点击（函数（五）{
        //取消默认行为
        即preventDefault（）;

        //获取的链路的地址
        VAR HREF = $（本）.attr（HREF'）;

        //获取所需的元素供以后使用它
        变量$包= $（'＃AJAX-包'）;

        $包
            //删除旧数据
            html的（''）

            //向上滑动
            .slideUp（）

            //加载远程页面
            .load（HREF +＃内容，函数（）{
                //现在向下滑动
                $ wrap.slideDown（）;
            }）;
    }）;

}）;
 

Ok, so I'm pretty new to ajax and loading content externally and would appreciate any insight to my problem.

I currently have a hidden div that is empty where the ajax content should load in after a link is clicked.

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

I currently have a list of links that all have the same class and I'd like to have, when clicked, the blank div do a slide toggle and then load in the content from the page that the link was to.

Link:

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

Current jQuery:

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

Being as I'm new to Ajax and loading the external content, I'd like to know how to load content from the linked page that's house in the #content tag. So essentially, I'd like a .home-right link, #ajax-wrap would slide toggle, and then Ajax would pull content from the linked page (which is always going to be a different random link) and it's #content div, placing that content in #ajax-wrap.

Thanks in advance for any help folks!

解决方案

You want to set the ajax for the links. Requirements:

1. Writing a handler for links.
2. We must cancel the default behaviour of browser when somebody click on a link (that redirect to the page).
3. Removing old data ajax recieved from server and make the #ajax-wrap fresh.
4. Load the remote page via ajax and set it to #ajax-wrap.
5. Now slide it down.

---

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

});

这篇关于加载内容通过Ajax的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！