19

我似乎徒劳地尝试能够将其他参数传递回我为成功的ajax调用创建的成功回调方法。一点背景。我有一个包含许多动态创建的文本框/选择框对的页面。每对具有动态分配的唯一名称，例如 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>

从我读过的内容来看，我觉得我很接近，但我不能把手指放在缺失的链接上。请以典型的忍者隐秘方式提供帮助。TIA

****更新****尼克是一个真正的忍者。他们应该为此发明一个新徽章！他在下面的回答可以解决问题。正如他提到的那样，它是 1.4 特定的，但我可以忍受。这是我的最终代码，适用于任何 Ninjas 培训（以及我未来的参考）：

<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 调用和成功函数也必须是同一对象的一部分。将您的函数放在一个对象中并像这样定义它们

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那样“级联” 。

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 中的本机。
于 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 回答