为什么在 Bootstrap typeahead 函数中使用 AJAX/JSON 响应时未定义？答案

【问题标题】：Why is AJAX/JSON response undefined when used in Bootstrap typeahead function?为什么在 Bootstrap typeahead 函数中使用 AJAX/JSON 响应时未定义？
【发布时间】：2013-07-06 03:49:00
【问题描述】：

我创建了一个函数，该函数进行一个返回 JSON 字符串的 jquery AJAX 调用。就其本身而言，它工作正常——当我将字符串输出到控制台 (console.log) 时，我可以看到 JSON 字符串输出。

function getJSONCustomers()
{
var response =  $.ajax({
    type: "GET",
    url: "getCustomers.php",
    dataType: "json",
    async: false,
    cache: false
  }).responseText;
  return response;  
};

但是，当我设置一个变量来包含该函数调用的输出时：

var mydata = getJSONCustomers();

，然后尝试在我的 Twitter-Bootstrap TypeAhead 函数（表单自动完成）中使用它：

data = mydata;
console.log(data);

我在控制台中收到“未定义”错误。

下面是这段代码的sn-p：

$(document).ready(function() {

var mydata = getJSONCustomers();

$('#Customer').typeahead({
    source: function (query, process) {
        customers = [];
        map = {};

        data = mydata;
        console.log(data);

 // multiple .typeahead functions follow......
});

有趣的是，如果我将数据变量设置为从 AJAX 函数返回的硬编码 JSON 字符串，一切正常：

data = [{"CustNameShort": "CUS1", "CustNameLong": "Customer One"}]

如何在我的 typeahead 函数中使用 JSON 字符串？

【问题讨论】：

我认为这与同步代码有关，但我不确定。原来的（工作的）console.log 去哪儿了？
我可以调用 var mydata = getJSONCustomers(); - 然后立即执行 console.log(mydata) 并且它工作正常。只有在我进入 typeahead 块之后它才会停止工作。
"如果我将数据变量设置为硬编码的 JSON 字符串" - 你没有。您将包含一个对象的数组分配给它。
@tresstylez 为了进一步澄清，手动设置 data 到 '[{"CustNameShort": "CUS1", "CustNameLong": "Customer One"}]'（一个 JSON 字符串）是否有效，就像您上次评论中所说的那样？
.responseText 返回一个字符串。您必须先解析字符串：var mydata = JSON.parse(getJSONCustomers());。话虽如此，您应该避免进行同步调用。看看stackoverflow.com/questions/14220321/…。

标签： javascript json jquery twitter-bootstrap

【解决方案1】：

问题是 Ajax 请求在 typeahead 初始化之前没有机会完成，因此 typeahead 使用未初始化的 mydata 变量进行初始化。此外，从 jQuery 1.8+ 开始，async: false 已被弃用，您需要使用完整/成功/错误回调。

试试这个：

function getJSONCustomers(callback) {
    $.ajax({
        type: "GET",
        url: "getCustomers.php",
        dataType: "json",
        cache: false,
        success: callback
    });
};

然后你可以这样做：

getJSONCustomers(function(mydata) {
    // mydata contains data retrieved by the getJSONCustomers code
    $('#Customer').typeahead({
        source: function (query, process) {
            customers = [];
            map = {};
            console.log(mydata);

 // multiple .typeahead functions follow......
    });
});

因此，您的代码在初始化 typeahead 插件之前完成了 Ajax 调用。

【讨论】：

OP 发出同步请求，所以这不是问题。

【解决方案2】：

.responseText 返回一个字符串。您必须先解析字符串才能使用数组：

var mydata = JSON.parse(getJSONCustomers());

话虽如此，您应该避免进行同步调用。查看How do I return the response from an asynchronous call? 了解如何使用回调/承诺。

【讨论】：