【jQuey】Ajaxのコールバック関数の中で$(this)を使う方法

“context : this”と設定するとコールバック関数内で$(this)を使えるようになる。

jQuery


$('.hoge').on('click', function() {
    $.ajax({
        type:'POST',
        url:'https://example.com/hoge',
        dataType: 'json',
        context : this, // これでコールバック関数内で$('hoge')を$(this)として使える
    }).done(function (result){
        // 成功時
    }).fail(function(jqXHR, textStatus, errorThrown){
        // 失敗時
    });
});

$('.hoge').on('click', function() {

$.ajax({

type:'POST',

url:'https://example.com/hoge',

dataType: 'json',

context : this, // これでコールバック関数内で$('hoge')を$(this)として使える

}).done(function (result){

// 成功時

}).fail(function(jqXHR, textStatus, errorThrown){

// 失敗時

});

公式ドキュメントを見るとDOMを渡せるらしく、thisだけではなくdocument.bodyなども渡せる(渡したものがコールバック関数内での$(this)となる)。

公式ドキュメントのサンプル


$.ajax({
  url: "test.html",
  context: document.body
}).done(function() {
  $( this ).addClass( "done" ); // <body class="done"></body>になる
});

$.ajax({

url: "test.html",

context: document.body

}).done(function() {

$( this ).addClass( "done" ); // <body class="done"></body>になる

});

jQuery.ajax() | jQuery API Documentation

https://api.jquery.com/jQuery.ajax/

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル