Jqueryを使用した自動Ajaxセレクター
-
03-07-2019 - |
質問
概念実証のWebサイトを作成しようとしていますが、完全な劣化が必要です。そのため、最初にプレーンなXHTMLでWebサイトをコーディングし、次にクラスとアンプを追加します。 IDをjQueryでフックします。
私がやりたいことの1つは、最終的にすべてのリンクに対してAjax xmlhttprequestを有効にして、ビューポートdivに表示することです。このビューポートを「ユニバーサル」にしたい複数の外部ページからのxmlhttprequestのダンプ。
次のようなハードコードができるかどうか疑問に思っていました:
<a href="blah.html" class="ajax">, <a href="bleat.html" class="ajax">
などご覧のとおり、クラスajaxでAjaxリクエストを呼び出したいすべてのリンクタグを指定します。 jQueryに基づくJSでは、すべての正の$ {&quot; a&quot;)。filter(&quot..ajax&quot;)がそれぞれのhref [変数]をajaxリクエストとして自動的にロードするようにコーディングできます。
助けてください。私はn00bです。
解決
例を使用すると、次のことができるはずです。
$('.ajax').click(function () {
// Your code here. You should be able to get the href variable and
// do your ajax request based on it. Something like:
var url = $(this).attr('href');
$.ajax({
type: "GET",
url: url
});
return false; // You need to return false so the link
// doesn't actually fire.
});
&quot; ajax&quot;とは異なるクラスを使用することをお勧めします。 $( '。ajax')
は $。ajax()
として誤読される可能性があるため、コードを読むのが少しおかしくなるためです。
$( '。ajax')。click()
部分は、ページのすべての要素のonClickイベントハンドラーをクラス&quot; ajax&quot;に登録します。それはまさにあなたが望むものです。次に、 $(this).attr( 'href')
を使用して、クリックされた特定のリンクのhrefを取得し、必要な操作を行います!
他のヒント
次のようなもの:
function callback(responseText){
//load the returned html into a dom object and get the contents of #content
var html = $('#content',responseText)[0].innerHTML;
//assign it to the #content div
$('#content').html(html);
}
$('a.ajax').click(function(){
$.get(this.href, callback);
return false;
});
ナビゲーションが複数回表示されないように、#content divの外側にあるすべてを解析する必要があります。正規表現について考えていましたが、おそらくjQueryを使用してそれを行う方が簡単だったので、例を更新しました。