JQuery КАК? передать дополнительные параметры для обратного вызова успеха для вызова $.ajax?
Я пытаюсь, напрасно, иметь возможность передать дополнительные параметры обратно к методу обратного вызова успеха, который я создал для успешного вызова ajax. Немного фона. У меня есть страница с несколькими динамически создаваемыми парами текстового поля/выбора. Каждая пара имеет динамически назначенное уникальное имя, такое как name= "unique-pair-1_txt-url" и name= "unique-pair-1_selectBox", тогда вторая пара имеет то же самое, но префикс отличается.
В попытке повторного использования кода я обработал обратный вызов, чтобы взять данные и ссылку на selectbox. Однако при обратном вызове ссылка на selectbox возвращается как "undefined". Я читал здесь, что это должно быть выполнимо. Я даже попытался воспользоваться опцией "контекст", но все равно ничего. Вот блок script, который я пытаюсь использовать:
<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>
Ответы
Ответ 1
Обновлено: Если вы используете 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)
Ответ 2
Это то, что я сделал, и он также отлично работал:
$.ajax('URL', {
myCustomControl: selectBox,
myCustomVariable: 'teste',
data:
{
myData: 1
},
success: function (data, textStats, jqXHR) {
myFunction(data, textStats, jqXHR, this.myCustomControl, this.myCustomVariable);
}
});
Вы можете добавить элементы управления и переменные в параметры вашего вызова ajax.
Ответ 3
Поместите это в свои параметры $.ajax.
invokedata: {
data1: "yourdata",
data2: "moredata"
}
В функции успеха используйте его так:
this.invokedata.data1;
this.invokedata.data2;
Ваш вызов $.ajax и функция успеха также должны быть частью одного и того же объекта. Поместите свои функции в объект и определите их как это
function myObject {
var getImage = function(..) { }
var loadImagesInSelect = function(..) { }
}
Ответ 4
this
находится вне области действия
Просто, чтобы вы (или кто-либо еще) понимали (а) 1 причина, по которой this
была undefined в loadImagesInSelect()
в вашем исходном примере, была потому, что эта функция находилась под другим область действия и области действия не "каскадируются" как 2.
Когда вы указали "контекст" selectBox
в своем вызове AJAX, он устанавливает контекст (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()
, чтобы получить this
к функции, которая раньше называлась loadImagesInSelect()
, но вы все равно переместили эту функцию в "успех" (вместо того, чтобы называть ее из "успеха" ). Теперь он уже имеет доступ к значению this
, указанному в "контексте".
Вы можете удалить обертку $.proxy()
вокруг своей "успешной" функции в обновленном коде, и она все равно будет работать.
Я знаю, что прошло много лет с тех пор, как вы задали свой вопрос, но я надеюсь, что это поможет.
- Надеюсь, это не встретит снисхождения; это не должно было быть.
- По крайней мере, не при вызове функции, а не в контексте. Если вы определяете функцию внутри функции (т.е. Замыкание), то любые переменные во внешней функции будут доступны во внутренней функции. Однако внешний контекст функции (переменная
this
) по-прежнему недоступен во внутренней функции.
- Замените
undefined
на window
для нестрогого режима.
- Или нативный
Function.prototype.bind()
в ECMAScript 5.
Ответ 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);
});