1

HTML フォールバックで AJAX を使用するインターフェイスを構築しています。最初にすべてのタグを AJAX なしで機能するように設定してい<a>ます。Javascript が有効になっている場合、各リンクには「onclick」関数が関連付けられ、サーバー上の別のページにまったく同じクエリ文字列が送信されます。

元のリンクは次のようになります。

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

上記の href リンクから Javascript を介して "key1=value1&key2=value2" を文字列として取得するにはどうすればよいですか? のような AJAX リクエストを作成します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しかし、IE8attachEventでは、addEventListener.

(return false;昔ながらの DOM0 イベント ハンドラーからonclick、イベントのデフォルト アクションを防止するようになっています。詳細.)

于 2013-10-28T22:16:34.813 に答える
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 に答える