1

我正在构建一个使用 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.

4

3 回答 3

1

您可以将click处理程序附加到单个链接：

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自己：

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.

（return false;来自老式的 DOM0 事件处理程序，例如onclick阻止事件的默认操作；详细信息。）

于 2013-10-28T22:16:34.813 回答
1

tl;博士

查看您对其他答案的评论，这就是您所需要的

linkElement.search.substr(1)


答案...

您可以访问与使用相同的属性window.location。

对于 href 的查询字符串，它将是(document.querySelector('a#mylink')).search

其他无障碍物业

.hash
.host
.hostname
.href
.origin
.pathname
.port
.protocol
.search

在您的情况下，对于页面上的所有链接，请使用这个小脚本

*我只选择带有实际hrefs的链接。

[].forEach.call(document.querySelectorAll('a[href]'), function(el) {
    var queryString = el.search.substr(1)
    el.onclick = function(e){
        e.preventDefault() // don't redirect and stuff...
        // do the magic here with the queryString
    }
})
于 2016-04-07T12:03:08.603 回答
0

此示例代码应该足以帮助您解析所需的内容。请注意，我向锚点添加了一个 id 以使其易于访问。

<!DOCTYPE html>
<HTML>
<HEAD>
<SCRIPT type="text/javascript">
function parse() {
  var el = document.getElementById("foo");
  var href = el.href;
  var pos = href.indexOf("?");
  alert(href.substring(pos+1));
}

</SCRIPT>
</HEAD>
<BODY bgcolor="white" onLoad="parse()">
<a id="foo" class="ajax" href="http://example.com/page?key1=value1&key2=value2">Link</a>
</BODY>
</HTML>
于 2013-10-28T22:19:11.600 回答