1. 首页
  2. 问题
  3. 通过Ajax加载内容
一尘不染

通过Ajax加载内容

ajax

好的，所以我对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。

在此先感谢大家的帮助！


阅读 225

收藏
2020-07-26

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

});
2020-07-26