19

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

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

<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>
4

5 に答える 5

24

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

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

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

于 2013-09-06T12:12:36.010 に答える
14

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

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

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

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

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

function myObject {
    var getImage = function(..) { }
    var loadImagesInSelect = function(..) { }
}
于 2010-04-09T00:02:54.057 に答える
13

更新： 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)
于 2010-04-08T22:25:10.370 に答える
4

this範囲外です

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

selectBoxAJAX呼び出しでの「コンテキスト」を指定するとthis、「成功」と「エラー」に指定された関数のコンテキスト（）が設定されます。（たまたま、両方とも無名関数でした。）この時点で、thisこれらの関数の両方で、の値として定義されていますselectBox。ここで、「success」に渡される関数で、を呼び出しますloadImagesInSelect()。関数を呼び出すと、新しいスコープが作成されます。このスコープでthisはwindow、非厳密モードと厳密モードになりundefinedます。

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

// 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()に到達するために使用しますが、とにかく（「成功」内から呼び出すのではなく）その関数を「成功」に移動しました。「context」で指定された値にすでにアクセスできるようになりました。thisloadImagesInSelect()this

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

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

  1. 私はこれが見下すようなものとして出くわさないことを望みます。それはそうなることを意図したものではありません。
  2. 少なくとも、関数を呼び出すときではなく、コンテキストではありません。関数内で関数を定義する場合（つまり、クロージャ）、外部関数のすべての変数が内部関数で使用可能になります。ただし、外部関数のコンテキスト（this変数）は、内部関数ではまだ使用できません。
  3. 非厳密モードの場合はにundefined置き換えます。window
  4. Function.prototype.bind()または、 ECMAScript5のネイティブ。
于 2015-02-23T21:06:30.230 に答える
1

渡すために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);
});
于 2016-05-24T06:46:18.510 に答える