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

我找到了Passing variables to $.ajax().done()，但两种解决方案都没有起作用：

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

    .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 个答案: