Question

让FooTable响应式表插件正常工作。现在我正在尝试设置一个PHP脚本来拉取PostgreSQL并返回一个JSON编码的数组。

到目前为止一切正常。我真的很接近使这个jQuery脚本工作，但我不确定为什么我的变量没有传递。

这是脚本：

  var columns_json;
  var rows_json;

  jQuery(function($){

  $.ajax(
    {
      type: "POST",
      dataType:"JSON",
      url: "a.php",
      data: {action: 'test'},

      success: function(data)
        {
          columns_json = data[0];
          rows_json = data[1];

          console.log(columns_json);
          console.log(rows_json);
        },

      failure: function(data) 
        {
          alert("Something went wrong");
        }
    });

    $('.table').footable(
    {

      "paging": {"enabled": true},

      "filtering": {"enabled": true},

      "sorting": {"enabled": true},

      "columns": columns_json,

      "rows": rows_json                   

      });
});

如果我查看我的控制台，我甚至可以看到两个数据阵列正确返回...我甚至尝试输出数据以确保它是正确的（没有问题）：

console.log(JSON.stringify(columns_json))

所以我对jQuery的理解不是：当我在$.ajax函数中更新我在脚本顶部声明的变量时，为什么JSON数组在$('.table').footable(函数中不可用？

承认我已经只玩了一个多月的jQuery，所以这对我来说都是新的。

我确实找到了一个解决方法来实现这一点，这就是对此Post的建议。我修改了我的脚本并让它运行起来。但是，控制台会抛出警告：

“主线程上的同步XMLHttpRequest已弃用，因为它对最终用户的体验有害。“

与往常一样，任何想法和建议都非常受欢迎。

Answer 1

在成功回调中移动填充表格的逻辑。

或者，您也可以将逻辑封装在函数中，并从成功回调中调用该函数。

您的代码无效的原因是因为$ .ajax是异步的，这意味着它不会等待服务器请求完成，而是立即执行下一个代码。

在您链接的答案中，您发现async: false - 这是一个（坏）替代方案，因为它会使您的ajax调用等待服务器响应 - 但它也会向用户看，就好像浏览器是冻结。

建议：同时显示加载动画/叠加，而你正在进行可能需要几秒钟才能完成的ajax调用。

修改完代码后，请检查您的变量是否仍需要全局。

var columns_json;
var rows_json;

jQuery(function($) {

  $.ajax({
    type: "POST",
    dataType: "JSON",
    url: "a.php",
    data: {
      action: 'test'
    },

    success: function(data) {
      columns_json = data[0];
      rows_json = data[1];

      $('.table').footable({

        "paging": {
          "enabled": true
        },

        "filtering": {
          "enabled": true
        },

        "sorting": {
          "enabled": true
        },

        "columns": columns_json,

        "rows": rows_json

      });
    },

    failure: function(data) {
      alert("Something went wrong");
    }
  });


});

使用jQuery的全局变量

1 个答案: