Question

我正在尝试从JSON格式的链接中保存数据并将该数据传递给Bootstrap表，但它无法正常工作

我可以在控制台中查看数据，如果我使用data-url，它可以正常工作，但我想将数据保存在变量中并在表格中使用该数据。

如果我使用此代码而不是正常工作，但我想首先将数据保存到变量中，然后将其分配给表。

$.get("https://api.github.com/users/wenzhixin/repos", function(data){
    $('#table').bootstrapTable({
        data: data
    });
});

Answer 1

只需更改您的jQuery代码： -

var jsonData;

$.ajax({
    async: false,
    dataType: "json",
    url: "https://api.github.com/users/wenzhixin/repos",
    success: function(result) {
        jsonData = result;
    }
});

$(function () {
        $('#randomTable').bootstrapTable({data: jsonData});
});

function queryParams() {
    return {
        type: 'owner',
        sort: 'updated',
        direction: 'desc',
        per_page: 100,
        page: 1
    };
}

我已将Ajax响应数据存储到一个变量中，然后在将数据分配给bootstrap表时添加SetTimeout。

它可能对你有帮助。

Answer 2

由于您提到将数据存储到变量中的唯一想法是重新使用，您可以在下面执行此操作。的 Working Fiddle

var jsonDataCall ; // keep a global variable in the scope. $(function() { $.get("https://api.github.com/users/wenzhixin/repos", function(result){ jsonDataCall = result; // save it to a variable for later use $('#table').bootstrapTable({ data: jsonDataCall // use the same variable to build the table }); }); });

顺便说一句async已弃用，您不应再使用它more details here和here

解释jsfiddle中提供的代码中的问题：

var jsonDataCall = $.getJSON("https://api.github.com/users/wenzhixin/repos", function(result){ jsonDataCall =result; }); var jsonData = $.ajax({ // this variable is not used anywhere in the code. async: false, dataType: "json", url: "https://api.github.com/users/wenzhixin/repos", success: function(result) { jsonData = result; } }); $(function () { var $table = $('#randomTable').bootstrapTable({data: jsonDataCall}); });

此行var $table = $('#randomTable').bootstrapTable({data: jsonDataCall});开始准备文件。在这里，我们有jsonDataCall将访问其中的值。但是在第一行中，您为此变量分配了ajax方法，而不是值。因此，上面一行data: jsonDataCall将尝试将ajax函数分配给数据变量它不会分配从服务器返回的值，因为它在ajax成功执行后会出现。

解决方案：当您处理ajax调用时，必须确保所有依赖于返回的服务器结果的代码都应该在ajax成功时启动，否则您将遇到麻烦。

JSON数据无法正常工作的Bootstrap表

2 个答案: