使用 AJAX 编写内部链接

Posted 2023-03-05

【中文标题】使用 AJAX 编写内部链接

【英文标题】：Write internal link with AJAX

【发布时间】：2011-12-19 00:56:10

【问题描述】：

我正在尝试编写一些我的第一个 jquery 脚本，但我遇到了一些问题...... 我的页面有很多内部链接的长文本（ <a href="/contents/Foo.htm" class=.internal>Foo</a> )。我希望当您单击其中一个 .internal 链接时，href 路径将在 <div id="article"> 内打开。

var InternalLink = function() 
    $(".internal").click(function()
        var path =  $(this).attr("href");
        $.ajax(
            url: "path",
            success: function(data) 
                $('#article').html(data);
            
        );
    );    
;

我编写了如下所示的代码，它运行良好，但我正在尝试将代码推广到具有内部类的每个链接：

$("#article_01").click(function()
    $.ajax(
        url: 'contents/article_01.htm',
        success: function(data) 
            $('#article').html(data);
        
    );
);

【问题讨论】：

不要放“.”在锚中的类名之前。点仅在jquery中用于基于类进行选择。

【参考方案1】：

<a href="/contents/Foo.htm" class="internal" data-ref="article_01">Foo</a>

JS：

$(".internal").click(function()
    var path =  this.href;
    var div = $(this).data('ref');
    $.ajax(
        url: path,
        success: function(data) 
            $('#'+div).html(data);
        
    );
    return false; // so the link does *not* follow through
);    

所以现在您要做的就是将data-ref 更改为指向您希望在其中加载html 的div。

【讨论】：

这行不通，因为有一个“。”在锚的类名前面。需要从 html 中删除。

@scrappedcola thanx，抱歉直接从 OP 复制过来——没有注意那个大声笑

谢谢伙计！但是我要在href里面写什么？ data-ref 是我要在 div 中加载的文件的 url，但我无法理解 href。我可以只输入“#”吗？我已经尝试过该脚本，但它似乎无法正常工作......我认为路径 var 不包含正确的路径。在这个例子中 bit.ly/viKQrD Chrome 控制台告诉我“GET (MyDomain).com/example/path 404 (Not Found)”

@Nicolaesse 抱歉，我把 path 的引号去掉了，不知道他们为什么在那里。 （旁注：缩短的 url 在堆栈交换中不受欢迎，请尝试使用真实的 url 路径。）

@Neal 现在完美了！非常感谢！