全局范围、返回值和 ajax 的问题？

Question

标题是对我的脚本出了什么问题的猜测：

这是在我的 global.js 脚本中：

alert(search.getLabelsNames(); //alerts as undefined.
$('#search').autocomplete({
    source: function( request ) {
        search.getLabelsNames();
    },
    minLength:1
});

这是在我的 functions.js 脚本中：

var search;
window.search = {
    getLabelsNames:function( search ) {
        $.ajax({
            url : '../db_scripts/get_labels_names.php',
            type: "POST",
            data: { id: search }, //this defaults to nothing. not a problem
            success : function( data ) {
                var dataObj = jQuery.parseJSON( data );
                $.each(dataObj, function() {
                    alert(this.name);
                    return this.name;
                })
            }
        });
    }
}

在每个函数 this.name 从数据库中正确返回每个标签名称。但是当我从 globals.js 调用它时，它返回为 undefined。如果我返回数字 1，search.getLabelsNames() 会警告 1..，因此查找全局函数没有问题。

这个脚本有什么问题，为什么 global.js 找不到返回的 this.name ？

Answer 1

您有两个问题：

1. 您无法从 jQuery.each 回调返回数据。返回值表示是否停止迭代。来自 文档：

   <块引用>

   我们可以通过使回调函数返回 false 来在特定迭代中中断 $.each() 循环。返回非 false 与 for 循环中的 continue 语句相同；它将立即跳到下一次迭代。

2. 您无法从 Ajax 回调返回数据。 Ajax 是异步，这意味着在您的情况下，getLabelsNames 在检索和处理响应之前返回。

幸运的是，自动完成插件接受函数作为源。您已经在使用它，但没有正确使用。让它接受第二个参数，这是一个回调。来自文档：

第三种变体，即回调，提供了最大的灵活性，可用于将任何数据源连接到自动完成。回调获取两个参数：

• 一个请求对象，具有一个名为“term”的属性，它指的是当前文本输入中的值。例如，当用户在城市字段中输入“new yo”时，自动完成术语将等于“new yo”。

• 响应回调，它期望单个参数包含向用户建议的数据。应根据提供的术语过滤此数据，并且可以采用上述简单本地数据的任何格式（具有标签/值/两个属性的字符串数组或对象数组）。提供自定义源回调来处理请求期间的错误非常重要。即使遇到错误，您也必须始终调用响应回调。这确保了小部件始终具有正确的状态。

因此，您需要做的就是将此回调传递给 getLabelsNames，以便可以在 Ajax 调用的 success 方法中调用它：

$('#search').autocomplete({
    source: function(request, callback) {
        // pass the callback along
        search.getLabelsNames(request.term, callback);
    },
    minLength:1
});

window.search = {
    getLabelsNames:function(search, callback) { // accept callback as argument
        $.ajax({
            url : '../db_scripts/get_labels_names.php',
            type: "POST",
            data: { id: search }, //this defaults to nothing. not a problem
            success : function( data ) {
                // format the data
                data = $.map(jQuery.parseJSON(data), function(obj) {
                    return obj.name;
                });
                // pass the data to the callback
                callback(data);
            }
        });
    }
}

请注意，我使用 jQuery.map ^[文档] 这里，返回的地方回调中的值有不同的含义。不要将它与 jQuery.each 混淆。

Answer 2

this 取决于调用的上下文。所以在你的内部函数中， this 是不一样的。

根据 dataObj 的结构，您可能想要执行以下操作：

$.each(dataObj, function(key, value) {
                alert(value.name);  // value will correspond to the current item being looped over
                return value.name;
            })

Answer 3

AJAX 调用是异步的，这意味着您触发它们，它们稍后响应。您不能简单地从 ajax 调用“返回”一个值——您需要在“成功”时将一个值传递给另一个函数。