从 AJAX 请求中获取数组值 [重复]

Posted 2023-02-16

【中文标题】从 AJAX 请求中获取数组值 [重复]

【英文标题】：Get array value from AJAX request [duplicate]

【发布时间】：2017-05-25 02:37:23

【问题描述】：

我有一个脚本，它读取一个 JSON 文件，然后用每个元素的 name 属性填充一个数组。

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
var a = [];

var myMethod = function()
    $.ajax(
        url : "numbers.json",
        dataType : "json",
        success : function(data)
            for(i in data)
                a.push(data[i].name);
            
        
    );


myMethod();
console.log(a[2]); // console.log() returns "undefined"
</script>

JSON

[
    "name" : "One",
    "name" : "Two",
    "name" : "Three",
    "name" : "Four",
    "name" : "Five"
]

我无法访问此数组的特定索引。控制台日志总是返回 undefined。我尝试在我的 ajax 调用之后添加 .then()，但它也不起作用。

【问题讨论】：

您的 console.log 在 ajax 请求完成之前正在运行。签入创建数组的ajax成功函数，你会得到它

number.json 中有什么？你能在这里发布虚拟数据吗？这样我就可以为你创建一个简单的代码 sn-p

JSON 已经给出

如果您设置 ajax 属性“async:false”，您的代码也可以工作

【参考方案1】：

您的console.log(a[2]); 在AJAX 完成处理之前运行，因为AJAX 的异步性质，这就是它返回undefined 的原因。将 console.log 放入 AJAX 成功。查看工作的 sn-p：

var a = [];

var myMethod = function()
    $.ajax(
        url : "https://api.myjson.com/bins/b4bnr",
        dataType : "json",
        success : function(data)
            for(i in data)
                a.push(data[i].name);   
            
           console.log(a[2]);
        
    );


myMethod();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

您可以阅读有关 AJAX 工作原理的更多信息here。

【参考方案2】：

当 ajax 调用完成时，myMethod 函数完成，并移至下一行，即 console.log。只有在对 numbers.json 的请求返回后才会执行成功。试试这个：

var a = [];

var myMethod = function()
    $.ajax(
        url : "numbers.json",
        dataType : "json",
        success : function(data)
            for(i in data)
                a.push(data[i].name);
            
            console.log(a[2]);
        
    );


myMethod();

【参考方案3】：

你会想做这样的事情：

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
var a = [];

var myMethod = function() 
    $.ajax(
        url: "numbers.json",
        dataType: "json",
        success: function(data) 
            for (i in data) 
                a.push(data[i].name);
            
            handleData();
        
    );


function handleData() 
    console.log(a[2]);


myMethod();
</script>

javascript 不会等待您的所有代码逐行运行，因此对于异步调用，您需要一个单独的函数来处理数据或在成功回调中处理数据。另一个函数会更简洁，但取决于您要对数据执行的操作。

【参考方案4】：

您正在使用$.ajax 函数运行异步请求，因此您应该等待响应，然后在从服务器端收到响应时调用console.log 内部成功回调，否则console.log 将不起作用，因为查询未决：

success : function(data)
     for(i in data)
         a.push(data[i].name);
     
     console.log(a[2]);

希望这会有所帮助。

【讨论】：

这个问题多年来被问过多次，我们有一个规范的副本。您有什么理由不使用您的金徽章将其标记为重复？