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

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

17 голосов
/ 08 апреля 2010

Я тщетно пытаюсь передать дополнительные параметры методу обратного вызова 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>

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

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

22 голосов
/ 06 сентября 2013

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

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

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

12 голосов
/ 09 апреля 2010

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

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

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

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

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

function myObject {
    var getImage = function(..) { }
    var loadImagesInSelect = function(..) { }
}
12 голосов
/ 09 апреля 2010

Обновлено: Если вы используете 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)
3 голосов
/ 24 февраля 2015

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

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

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

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

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

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

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