web-dev-qa-db-ja.com

jQuery HOW TO ?? $ .ajax呼び出しの成功コールバックに追加のパラメーターを渡しますか？

私は、無駄なように思われますが、追加のパラメーターを、成功したajax呼び出し用に作成した成功コールバックメソッドに戻すことができるようにしています。少し背景。動的に作成されたテキストボックス/セレクトボックスのペアを含むページがあります。 name = "unique-pair-1_txt-url"やname = "unique-pair-1_selectBox"などの動的に割り当てられた一意の名前を持つ各ペアには、2番目のペアは同じですが、プレフィックスが異なります。

コードを再利用するために、データとselectboxへの参照を取得するためのコールバックを作成しました。ただし、コールバックが発生すると、selectboxへの参照は「未定義」として返されます。私は here を読んで、それが実行可能であるべきだと述べました。 「コンテキスト」オプションを利用してみましたが、まだ何もしていません。これが私が使用しようとしているスクリプトブロックです。

<script type="text/javascript" language="javascript">
$j = jQuery.noConflict();
function getImages(urlValue, selectBox) {
    $j.ajax({
        type: "GET",
        url: $j(urlValue).val(),
        dataType: "jsonp",
        context: selectBox,
        success:function(data){
         loadImagesInSelect(data)
        } ,
        error:function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(thrownError);
        }

    });
}

function loadImagesInSelect(data) {
var select = $j(this);
select.empty();
$j(data).each(function() {
    var theValue = $j(this)[0]["@value"];
    var theId = $j(this)[0]["@name"];
    select.append("<option value='" + theId + "'>" + theValue + "</option>");
});
select.children(":first").attr("selected", true);

}    
</script>

私が読んだことから、私は近くにいると感じますが、ミッシングリンクに指を置くことができません。あなたの典型的な忍者隠密な方法で助けてください。 TIA

****更新****ニックは真の忍者です。彼らはそのための新しいバッジを発明すべきです！以下の彼の答えはトリックをします。彼が言及するように、それは1.4固有ですが、私はそれと一緒に暮らすことができます。これが、トレーニング中の忍者のために機能している私の最終的なコードです（そして私の将来のリファレンス）：

<script type="text/javascript" language="javascript">
$j = jQuery.noConflict();
function getImages(urlValue, selectBox) {
    $j.ajax({
        type: "GET",
        url: urlValue+ '?callback=?',
        dataType: "jsonp",
        context: selectBox,
        success: jQuery.proxy(function (data) {
            var select = $j(this);
            select.empty();
            $j(data).each(function() {
                var theValue = $j(this)[0]["@value"];
                var theId = $j(this)[0]["@name"];
                select.append("<option value='" + theId + "'>" + theValue + "</option>");
            });
            select.children(":first").attr("selected", true);
        }, selectBox),
        error:function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(thrownError);
        }
    });
}
</script>
jqueryjquery-callback
18
dotnetgeek

更新： jQuery 1.4を使用している場合は、これを使用して少し単純化します。

success: jQuery.proxy(function (data) {
    var select = $j(this);
    select.empty();
    $j(data).each(function() {
        var theValue = $j(this)[0]["@value"];
        var theId = $j(this)[0]["@name"];
        select.append("<option value='" + theId + "'>" + theValue + "</option>");
    });
    select.children(":first").attr("selected", true);
}, selectBox)
12
Nick Craver

これは私がやったことであり、それもうまくいきました：

$.ajax('URL', {
    myCustomControl: selectBox,
    myCustomVariable: 'teste',
    data:
    {
       myData: 1
    },
    success: function (data, textStats, jqXHR) {
        myFunction(data, textStats, jqXHR, this.myCustomControl, this.myCustomVariable);
    }   
});

Ajax呼び出しのパラメーターにコントロールと変数を追加できます。

22
ClayKaboom

これを$ .ajaxパラメータに入れます。

invokedata: {
    data1: "yourdata",
    data2: "moredata"
}

成功関数では、このように使用します

this.invokedata.data1;
this.invokedata.data2;

$ .ajax呼び出しと成功関数も同じオブジェクトの一部である必要があります。関数をオブジェクトに入れて、次のように定義します

function myObject {
    var getImage = function(..) { }
    var loadImagesInSelect = function(..) { }
}
13
Egor Pavlikhin

thisは範囲外です

あなた（または他の誰か）が理解しているように1、元の例のloadImagesInSelect()でthisが定義されていなかった理由は、その関数が別のスコープの下にあり、スコープがそのように「カスケード」しないためです2。

AJAX呼び出しでselectBoxの「コンテキスト」を指定すると、「成功」と「」に指定された関数のコンテキスト（this）が設定されます（これらは両方とも無名関数であることが偶然に起こります。）この時点で、thisはこれらの関数の両方でselectBoxの値として定義されています。 「成功」に渡された場合は、loadImagesInSelect()を呼び出します。関数を呼び出すと、新しいスコープが作成されます。このスコープでは、thisはwindowになりますモードおよびundefined（ストリクトモード）。

グラフィカルに配置（厳密モード）３）：

_// this = window (global scope)

$j = jQuery.noConflict();
function getImages(urlValue, selectBox) {

    // this = undefined (function scope level 1)

    $j.ajax({
        type: "GET",
        url: $j(urlValue).val(),
        dataType: "jsonp",
        context: selectBox,
        success: function(data) {

            // this = selectBox (function scope level 2)

            loadImagesInSelect(data);
        },
        error: function(xhr, ajaxOptions, thrownError) {

            // this = selectBox (function scope level 2)

            alert(xhr.status);
            alert(thrownError);
        }
    });
}

function loadImagesInSelect(data) {

    // this = undefined (function scope level 3)

    var select = $j(this);
    select.empty();
    $j(data).each(function() {
        var theValue = $j(this)[0]["@value"];
        var theId = $j(this)[0]["@name"];
        select.append("<option value='" + theId + "'>" + theValue + "</option>");
    });
    select.children(":first").attr("selected", true);
}
_

$.proxy()は冗長です

更新されたコードでの$.proxy()の使用は冗長です。以前は$.proxy()と呼ばれていた関数にloadImagesInSelect()を使用してthisを取得しますが、その関数を「成功」に移動しました（内部から呼び出すのではなく） "成功"）。 「context」で指定されたthisの値にすでにアクセスしています。

更新されたコードで「成功」関数の$.proxy()ラッパーを削除しても、引き続き機能します。

あなたがあなたの質問をしてから何年も経っていますが、これが役に立てば幸いです。

  1. これが軽視されないことを願っています。それはそうではありません。
  2. 少なくとも、あなたが関数をcallしたときではなく、コンテキストではありません。関数内で関数を定義する場合（つまり、クロージャー）、外部関数の変数はすべて内部関数で使用できます。 ただし、外部関数のコンテキスト（this変数）は内部関数ではまだ利用できません。
  3. 非厳密モードの場合、undefinedをwindowに置き換えます。
  4. またはECMAScript 5のネイティブFunction.prototype.bind().
3
Hutch Moore

渡すにはindexValue属性を使用できます。

var someData = "hello";

jQuery.ajax({
    url: "http://maps.google.com/maps/api/js?v=3",
    indexValue: {param1:someData, param2:"Other data 2", param3: "Other data 3"},
    dataType: "script"
}).done(function() {
    console.log(this.indexValue.param1);
    console.log(this.indexValue.param2);
    console.log(this.indexValue.param3);
});
0
aecavac