JQuery КАК? передать дополнительные параметры для успешного обратного вызова для вызова $.ajax?

Я тщетно пытаюсь передать дополнительные параметры методу обратного вызова success, который я создал для успешного вызова ajax. Немного предыстории. У меня есть страница с несколькими динамически создаваемыми парами textbox / selectbox. Каждая пара, имеющая динамически назначаемое уникальное имя, такое как name="unique-pair-1_txt-url" и name="unique-pair-1_selectBox", тогда вторая пара имеет то же самое, но префикс отличается.

Чтобы повторно использовать код, я создал обратный вызов для получения данных и ссылки на окно выбора. Однако, когда сработает обратный вызов, ссылка на окно выбора возвращается как "неопределенное". Я читал здесь, что это должно быть выполнимо. Я даже пытался воспользоваться возможностью "контекста", но все равно ничего. Вот блок скриптов, который я пытаюсь использовать:

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

Из того, что я прочитал, я чувствую, что я близко, но я просто не могу положить палец на недостающее звено. Пожалуйста, помогите в ваших типичных хитрых способах ниндзя. ТИА

**** ОБНОВЛЕНИЕ **** Ник настоящий ниндзя. Они должны изобрести новый значок для этого! Его ответ ниже делает свое дело. Поскольку он упоминает, что это 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>
Источник

5 ответов

Решение

Обновлено: если вы используете 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)
Источник

Это то, что я сделал, и это также работало нормально:

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

Вы можете добавить элементы управления и переменные к параметрам вашего вызова ajax.

Источник

Поместите это в ваши параметры $.ajax.

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

В функции успеха используйте это так

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

Ваш вызов $.ajax и функция успеха также должны быть частью одного и того же объекта. Поместите свои функции в объект и определите их так

function myObject {
    var getImage = function(..) { }
    var loadImagesInSelect = function(..) { }
}
Источник

this выходит за рамки

Просто, чтобы вы (или кто-либо еще) понимали (с) 1, причину, по которой this был неопределен в loadImagesInSelect() в вашем первоначальном примере это было потому, что эта функция находилась в другой области видимости, и области видимости не "каскадные", как это 2.

Когда вы указали "контекст" selectBox в вашем вызове AJAX он устанавливает контекст (this) для функций, заданных для "успеха" и "ошибки". (Так уж получилось, что они оба были анонимными функциями.) this определяется в обеих из этих функций, как значение selectBox, Теперь, в функции, переданной в "успех", вы вызываете 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() получить this к функции, которая раньше называлась loadImagesInSelect(), но вы все равно перевели эту функцию в "успех" (вместо того, чтобы вызывать ее из "успеха"). Он уже имеет доступ к значению this определяется "контекстом".

Вы можете удалить $.proxy() обертка вокруг вашей "успеха" функции в вашем обновленном коде, и она все равно будет работать.

Я знаю, что прошло много лет с тех пор, как ты задавал свой вопрос, но я надеюсь, что это поможет.

  1. Я надеюсь, что это не кажется снисходительным; не судьба.
  2. По крайней мере, не когда вы вызываете функцию, а не с контекстом. Если вы определяете функцию внутри функции (т.е. замыкание), то любые переменные во внешней функции будут доступны во внутренней функции. Тем не менее, контекст внешней функции (this переменная) все еще не доступна во внутренней функции.
  3. замещать undefined с window для нестрогого режима.
  4. Или родной Function.prototype.bind() в ECMAScript 5.
Источник

Вы можете использовать атрибут 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);
});
Источник
Другие вопросы по тегам