Question

我创建了一个函数，它使jquery AJAX调用返回一个JSON字符串。它本身就可以正常工作 - 当我将字符串输出到控制台（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);

我的控制台出现“未定义”错误。

以下是此代码的摘要：

$(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"}]

如何在我的预先输入函数中使用JSON字符串？

Answer 1

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

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

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

Answer 2

问题是在初始化typeahead之前Ajax请求没有机会完成，因此使用未初始化的mydata变量初始化typeahead。此外，从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调用。

在Bootstrap预先输入函数中使用时，为什么AJAX / JSON响应未定义？

2 个答案: