javascript - jquery ajax获取数据并设置为全局变量

Question

在 JS 脚本的开头，我想从 php 文件分配一些全局变量，我需要在整个页面的不同函数中使用这些变量。所以，首先我这样做了:

HTML

<button onclick="somename()"> CALL FUNCTION </button></div>

JS

var a,
    b;

$.ajax({
    type: "POST",
    url: "test.php",
    data: {getvar: "getvar"},
    success: function(data) {
        a = data["a"];
        b = data["b"];
    },
    dataType: "json",
    async: false
}); 

    console.log(a);
$(document).ready(function() {  
    console.log(a);
    console.log(b);
});

function somename() {
    console.log(a);
}

对于上述方式，我需要使用 async: false，但这已经被弃用，并且不是一个好的解决方案，因为浏览器可能会卡住，但它可以根据需要工作。然后，我改成了这样:

$.post(
    "test.php",
    {getvar: "getvar"},
    function(data) {
        funget(data);       
    },
    "json"
);  

function funget(param) {
    $(document).ready(function() {  
        console.log(param["a"]);
        console.log(param["b"]);
    });

    function somename() {
        console.log(param["a"]);
    }
} 

但是将整个 js 脚本放在一个函数中似乎也不是一个好的解决方案，至少函数 somename() 将无法工作，可能还会出现其他一些问题。那么，如何才能让事情按需要工作并保存解决方案呢？

Answer 1

您可以使用ajaxComplete或者等待 ajax 调用完成后再继续。

var a,
b;

$.ajax({
    type: "POST",
    url: "test.php",
    data: {getvar: "getvar"},
    success: function(data) {
        a = data["a"];
        b = data["b"];
    },
    dataType: "json"
}); 

// do "asynchronous" things here

$.ajaxComplete(function() {
   // do stuff now that call is complete
});

另一种方法是使用ajax方法的complete属性。

var a,
b;

$.ajax({
    type: "POST",
    url: "test.php",
    data: {getvar: "getvar"},
    success: function(data) {
        a = data["a"];
        b = data["b"];
    },
    complete: function(data) {
        // do stuff now that call is complete
    },
    dataType: "json"
}); 

// do "asynchronous" things here