如何在循环内将变量传递给ajax.done（）？

Question

我想将变量传递给循环内发生的ajax调用的.done（）。 这是我的原始代码：

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

    <body>
        <div class="list">
            <div class="item" id="item1" data-user-id="1"></div>
            <div class="item" id="item2" data-user-id="2"></div>
            <div class="item" id="item3" data-user-id="3"></div>
            <div class="item" id="item4" data-user-id="4"></div>        
        </div>
        <script>           
            $('.list').children(".item").toArray().forEach(
                item => {            
                    $item = $(item)
                    $id = $item.data("userId")
                    $itemID = $item.attr('id')
                    $.ajax({
                        url: "https://jsonplaceholder.typicode.com/users",
                        data: { "id": $id },                    
                    }).done(res => {    
                        console.log($itemID)
                    });
                }
            );         
        </script>    
    </body>

    item4
    item4
    item4
    item4

当我希望看到（以任何顺序）时：

    item1
    item2
    item3
    item4

我发现将变量传递给$ .ajax（）。done（），但是2个解决方案都不起作用：

第一个使用立即调用的函数表达式：

    .done(
        ((result) => {                        
            console.log(result)
            console.log($itemID)
        })(res)
    );

    ReferenceError: res is not defined

第二个使用自定义ajax参数：

    $.ajax({
        url: "https://jsonplaceholder.typicode.com/users",
        data: { "id": $id },
        custom: $itemID   
        // same results with custom: { customID: $itemID }             
    }).done(res => {                        
        console.log(res)
        console.log(this.cutsom)
        // same output with console.log($itemID)
        //                  console.log(this.$itemID)
    });

    item4
    undefined
    item4
    undefined
    item4
    undefined
    item4
    undefined

我找到了其他两种也不起作用的解决方案（主要是使用不赞成使用的success属性）。 如果我错过了一个明显的答案，对不起，我已经尽力了。

Answer 1

看起来像一个范围问题。 您需要将$item ， $id和$itemId的范围限制为foreach函数。

var $item = $(item);
var $id = $item.data("userId");
var $itemID = $item.attr('id');

否则， $itemID = ...的最后一次调用将在异步ajax函数完成时保留您的最后一个id

Answer 2

编写所需代码的最佳方法是将.ajax方法放在如下函数中。 这样，您将为变量定义范围。

 function req($id, $itemID) { $.ajax({ url: "https://jsonplaceholder.typicode.com/users", data: { "id": $id }, }).done(res => { console.log($itemID) }); } $('.list').children(".item").toArray().forEach( item => { $item = $(item) $id = $item.data("userId") $itemID = $item.attr('id') req($id, $itemID); } );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="list"> <div class="item" id="item1" data-user-id="1"></div> <div class="item" id="item2" data-user-id="2"></div> <div class="item" id="item3" data-user-id="3"></div> <div class="item" id="item4" data-user-id="4"></div> </div>

如何在循环内将变量传递给ajax.done（）？

问题描述

2 个解决方案

解决方案1
1 已采纳 2019-07-18 14:06:52

解决方案2
0 2019-07-18 14:09:52

如何在循环内将变量传递给ajax.done（）？

问题描述

2 个解决方案

解决方案1 1 已采纳 2019-07-18 14:06:52

解决方案2 0 2019-07-18 14:09:52

解决方案1
1 已采纳 2019-07-18 14:06:52

解决方案2
0 2019-07-18 14:09:52