javascript - 通过 Javascript 从 href 属性获取查询字符串

Question

我正在构建一个使用 AJAX 和 HTML 后备的界面。我正在设置我所有的 <a>首先，标签无需 AJAX 即可工作，如果启用了 Javascript，每个链接都会附加一个“onclick”函数，该函数将完全相同的查询字符串发送到我服务器上的不同页面。

我的原始链接如下所示:

<a class="ajax" href="http://example.com/page?key1=value1&key2=value2">Link</a>

如何通过 Javascript 从上述 href 链接中检索“key1=value1&key2=value2”作为字符串？我将发出类似 http://example.com/ajax?key1=value1&key2=value2 的 AJAX 请求.

Answer 1

您可以将点击处理程序附加到各个链接:

var links = document.getElementsByTagName('a');
var index;
for (index = 0; index < links.length; ++index) {
    links.onclick = linkClickHandler;
}
function linkClickHandler() {
    var x = this.href.indexOf('?');
    var query = x >= 0 ? this.href.substring(x + 1) : null;
    if (query) {
        // Do the ajax thing...
        // (your code here)
        // ...and prevent the link from being followed
        return false;
    }
}

...或者(这可能更好)文档本身:

document.onclick = function(e) {
    var target, x, query;

    e = e || window.event;
    target = e.target;
    if (target.tagName.toUpperCase() === "A") {
        x = target.indexOf('?');
        query = x >= 0 ? target.substring(x + 1) : null;
        if (query) {
            // Do the ajax thing...
            // (your code here)
            // ...and prevent the link from being followed
            return false;
        }
    }
};

无论哪种情况，在现代浏览器上，您可能希望使用 addEventListener 而不是 onclick，并在事件对象上调用 preventDefault。但 IE8 仍然使用 attachEvent 而不是 addEventListener。

(来自老式 DOM0 事件处理程序(如 onclick)的 return false; 会阻止事件的默认操作；details 。)