如何在一个循环执行ajax方法里面嵌套的ajax方法

Posted 2023-05-04

function a()
$.ajax(
success:function(data)
for(循环data)
$.ajax(
success:function()


)；

,
);

大体是这样的，第一个ajax请求一次获取了一个数组，循环这个数组，执行第二个ajax，第二个ajax post请求的值是第一个ajax获取的数组循环得来的。我这样写，发现第二个ajax只执行了一次，不是for循环一次就执行一次的。不懂是啥问题？

这种问题 可以这样做，
将 ajax 请求封装 成一个函数。
将循环中的参数 传入函数 执行，
这样可以 避免 每次执行的ajax 可能都是循环的最后一次
每次循环的时候 由于是异步处理，（同步请求不会有这样的问题）
当ajax 准备执行的时候 ，去读取循环中的参数，
而这个时候 循环的值已经不最开始的那个了 ，
,我们将这个值保存在参数中， 而这样，
ajax 去请求的时候 读取的是参数值， 而不是循环的值

function a()
$.ajax(
success:function(data)
for(循环data)
//这样可以避免 循环执行完了 ajax 还没执行的问题
fn_ajax(data[i])

,
);
function fn_ajax(data)
$.ajax(
success:function()

)；


参考技术A for循环执行很快,而ajax执行很慢,这个时候会出现很多问题.

所以,不要用for循环去执行ajax.

而ajax有自己的安全机制, 你在一个回调函数中再次提起n次的ajax,会有很多不可预料的问题.

建议还是分开,或是自己写方法实现!追问

第二次执行的ajax必须要用到循环里面的参数，这分开了怎么整？function a（）是在页面加载完就执行的函数

追答

如果你请求的url是一个固定值,就没必要循环请求,一次性请求到这个URL上,由后台负责逻辑运算是很简单的事情.

返回一个json数据,再由前台去负责数据分配也比较容易维护!

追问

纠结的是url传送的参数是不定的呀，传送的参数是根据第一个ajax请求得到的值循环来的，参数不定返回的值也就不定了

追答

如果是这样,你的整个程序设计的逻辑可能出问题了!

如果一个页面大面积的使用ajax去请求服务器,一方面客户端肯定会很卡, 另一方面服务器端处理也浪费资源.

建议更改程序的逻辑!

参考技术B 用js的闭包处理这个问题很合适。闭包的用法搜索一下就明白。 参考技术C 我刚也遇到这个问题，我试过了一些办法，最后我是用递归解决了问题 参考技术D 多调试啊，你怎么知道没有执行

使用 AJAX 检索嵌套的 JSON 数组并输出到 HTML 列表

【中文标题】使用 AJAX 检索嵌套的 JSON 数组并输出到 HTML 列表

【英文标题】：Retrieving Nested JSON Array with AJAX and Outputting to an HTML List

【发布时间】：2019-07-09 23:29:07

【问题描述】：

这个想法是采用一个 JSON 数组，循环遍历 planets 的每个条目，并将它们输出到一个无序列表，每个 li 一个条目。在这种情况下一切正常。

当 JavaScript 文件包含 JSON 数组及其下面的代码时，我已经成功编写了一个输出嵌套 JSON 的方法，但是我在识别从外部 .json 文件中检索相同数据的方法时遇到了严重问题，使用AJAX。

这是工作的本地版本。

<ul id="object-list"></ul>

$(document).ready( function() 
    var sol_sys = [];
    sol_sys = 
        "stars": [
             "name": "Sun", "object": "Star", "url": "stars/sun" 
        ],
        "planets": [
             "name": "Mercury", "object": "Planet", "parent": "Sun", "url": "planets/mercury" ,
             "name": "Venus", "object": "Planet", "parent": "Sun", "url": "planets/venus" ,
             "name": "Earth", "object": "Planet", "parent": "Sun", "url": "planets/earth" ,
             "name": "Mars", "object": "Planet", "parent": "Sun", "url": "planets/mars" ,
             "name": "Ceres", "object": "Dwarf Planet", "parent": "Sun", "url": "planets/ceres" ,
             "name": "Jupiter", "object": "Planet", "parent": "Sun", "url": "planets/jupiter" ,
             "name": "Saturn", "object": "Planet", "parent": "Sun", "url": "planets/saturn" ,
             "name": "Uranus", "object": "Planet", "parent": "Sun", "url": "planets/uranus" ,
             "name": "Neptune", "object": "Planet", "parent": "Sun", "url": "planets/neptune" ,
             "name": "Pluto", "object": "Dwarf Planet", "parent": "Sun", "url": "planets/pluto" ,
             "name": "Eris", "object": "Dwarf Planet", "parent": "Sun", "url": "planets/eris" 
        ],
        "moons": [
             "name": "Luna", "object": "Moon", "parent": "Earth", "url": "moons/luna" ,
             "name": "Callisto", "object": "Moon", "parent": "Jupiter", "url": "moons/callisto" ,
             "name": "Ganymede", "object": "Moon", "parent": "Jupiter", "url": "moons/ganymede" ,
             "name": "Io", "object": "Moon", "parent": "Jupiter", "url": "moons/io" ,
             "name": "Europa", "object": "Moon", "parent": "Jupiter", "url": "moons/europa" ,
             "name": "Enceladus", "object": "Moon", "parent": "Saturn", "url": "moons/enceladus" ,
             "name": "Titan", "object": "Moon", "parent": "Saturn", "url": "moons/titan" ,
             "name": "Miranda", "object": "Moon", "parent": "Uranus", "url": "moons/miranda" ,
             "name": "Triton", "object": "Moon", "parent": "Neptune", "url": "moons/triton" ,
             "name": "Charon", "object": "Moon", "parent": "Pluto", "url": "moons/charon" 
        ]
    

    var x = [];
    $.each(sol_sys.planets, function(index) 
        x += '<li><a href="' + sol_sys.planets[index].url + '" title="' + sol_sys.planets[index].name + '" target="_blank">' + sol_sys.planets[index].name + '</a></li>';
    );
    $('#object-list').append(x);
);

但是，过去两天我一直在尝试找出实现此目的的方法，将 JSON 单独保存在单独的 .json 文件中。

这是我尝试过的一种方法的示例：

$(document).ready( function() 
    var sol_sys = $.getJSON('assets/data.json');
    var x = [];

    $.each(sol_sys.planets, function(index) 
        x += '<li><a href="' + sol_sys.planets[index].url + '" title="' + sol_sys.planets[index].name + '" target="_blank">' + sol_sys.planets[index].name + '</a></li>';
    );
    $('#object-list').append(x);
);

此代码成功获取了控制台中的数据，但它也输出了以下错误消息： Uncaught TypeError: Cannot read property 'length' of undefined

我在想有一些明显的东西我完全错过了。我也试过here演示的方法，结果完全一样。

谁能指出我正确的方向？

谢谢！

【问题讨论】：

嗨@DmitryS.，我不确定你的意思是什么？

您描述了上面的代码使用 ajax 成功获取数据，正如您在控制台中看到的那样。你能显示那个控制台结果吗？看来sol_sys.planets 不是数组。

@DmitryS。我想我混淆了我在控制台中进行的一些测试，直接将var sol_sys 行粘贴到那里。我尝试了很多东西，我迷失了方向。对于那个很抱歉。这绝对行不通。

那么，使用$.getJSON('assets/data.json') 会得到什么结果？获取数据后能否提供console.log(sol_sys)的结果？

jQuery getJSON save result into variable的可能重复

【参考方案1】：

$.getJSON 是一个异步调用 - 所以你需要使用回调函数来访问返回的数据：

$.getJSON('assets/data.json', function(sol_sys) 
    var x = [];

    $.each(sol_sys.planets, function(index) 
        x += '<li><a href="' + sol_sys.planets[index].url + '" title="' + sol_sys.planets[index].name + '" target="_blank">' + sol_sys.planets[index].name + '</a></li>';
    );
    $('#object-list').append(x);
);

【讨论】：

您好，感谢您的回答。我直接复制了你的代码，但它似乎仍然无法正常工作。

原来 JSON 格式不正确。您的解决方案现在也有效。我的错。谢谢你。 :)

【参考方案2】：

您好，您可以这样做：

你的 ajax：

function getList() 
   return $.ajax(
        type: "GET",
        url: "YourUrl"
    )

这样称呼它：

    getList().done(function(response)
    var data=JSON.parse(response);
    if (data != null) 
    jQuery.each(data, function(index, value)
//use an id in your ul in order to append some items
    $("#yourUl id").append('<li><a href=' + value.url+ '>' + value.name+ '</a></li>');
                                                    );
        

)

或者

$.getJSON( 'assets/data.json').done(function(response) 
    var data=JSON.parse(response);
    if (data != null) 
    jQuery.each(data, function(index, value)
    //use an id in your ul in order to append some items
    $("#yourUl id").append('<li><a href=' + value.url+ '>' + value.name+ '</a></li>');
);

)

编辑： 像这样附加元素：

        $.getJSON( 'data.json').done(function(response) 
    jQuery.each(response, function(index, value)
    $("#planetList").append('<li>'+index+'</li>');
     jQuery.each(value, function(index2, value2)
    $("#planetList").append('<ul><li><a href=' +value2.url+ '>' +value2.name+ '</a></li>')
    console.log(value2);
     )
         $("#planetList").append('<ul>');
    )
)

希望对你有帮助

【讨论】：

@DylRicho 你能记录下回复并发布一张照片吗？

@DylRicho 我会尝试在我的电脑上执行此操作并为您提供更新

@DylRicho 我已经编辑了帖子检查是答案有帮助

@DylRicho 你从哪里得到的json？是从某个数据库生成的数组还是某个 js 文件中的静态数组？因为我使用你的 json 并创建列表 imgur.com/a/iG9xw1Q

@dyl 我刚刚从我得到的结果中添加了一张图片