javascript - 没有Jquery的ajax中的文本链接

Question

我有很多普通的文本链接，我希望能够单击它们并发送一个 ajax 请求来获取页面，这样我就可以在收到 html 时动态地将它加载到父页面的不同部分从服务器返回。 因为我很固执并且喜欢知道事情是如何通过困难的方式完成的，所以我不想为 jquery 操心。我想用大锤的方式来做这件事。但是我找不到关于如何处理不使用 JQuery 的 ajax 链接的任何评论。 我是所有这一切的新手，非常感谢您的帮助。

Answer 1

一个建议是将点击处理程序附加到链接元素并颠覆默认行为，例如

<div id="links_container">
    <a href="http://example.com/page" class="ajax_link">Page</a>
    <!-- etc -->
</div>

在 JavaScript 中..

// define the click handler
var ajaxLinkHandler = function(e) {

    e.preventDefault();// prevent browser from following link
    var link = e.target;
    var url = link.href;

    // I won't take the time to rehash standard JS AJAX here
};

// now attach the handler
var container = document.getElementById("links_container");
var ajaxLinks = container.getElementsByClassName("ajax_link");

for (var i=0; i < ajaxLinks.length; i++) {
    ajaxLinks[i].onclick = ajaxLinkHandler;
}

我喜欢这种方法，因为您的 HTML 不会变得花哨。

• 对于纯 JS 中的 AJAX，请参阅 MDN .