javascript - For 循环在 Javascript 函数中无法正常工作

Question

我正在使用 Javascript 向 php 页面发送 Ajax 请求。

我的主要目标是将ajax请求发送到PHP页面并获取响应，我已经这样做了。

问题是当 Ajax 发回响应时，Javascript 无法正确地将其发送到 HTML。

看看我的代码，你就能清楚地理解。

Javascript code:

function get_rental_fee(){
        var count_model = $('#count_model').val();
        for(var i =0; i < count_model; i++){

        var hours = $('#hours').val();
        var modelid = $('#modelid_multi'+i).val();
        var get_tax = $('#get_tax_multi'+i).val();
        var get_counter = $('#get_counter_multi'+i).val();
        var myData = "hours="+hours+"&modelid="+modelid+"&get_tax="+get_tax;

    jQuery.ajax({

            type: "POST", // Post / Get method

            url: "get_rental_fee.php", //Where form data is sent on submission

            dataType:"text", // Data type, HTML, json etc.

            data:myData, //Form variables

            success:function(response){


                var result = response.split('|');

                       document.getElementById('rental_price_multi'+i).value=result[0];
                    document.getElementById('tax_multi'+i).value=result[1];


        },




            error:function (xhr, ajaxOptions, thrownError){

                //On error, we alert user

                alert(thrownError);

            }

            });

        }

    }

问题出在这里:

document.getElementById('rental_price_multi'+i).value=result[0];
                        document.getElementById('tax_multi'+i).value=result[1];

循环运行 3 次，Php 向我发送回响应 3 次。但在 Javascript 中，这些 2 行仅显示第 3 次的值，而不是第 1 次和第 2 次的值。但我收到了所有 3 次的回复。

此外，当我运行代码时，javascript 返回一个错误:

Uncaught Type Error: Cannot set Property 'value' of null

请帮我解决我做错的地方

Answer 1

问题是 $.ajax 默认情况下是 async: true，因此循环中的 i 的值在达到 success 时不是所需的值。你可以简单地使ajax同步:

$.ajax({
  async: false,
  ...
})

已编辑:

如果您仍然希望它是异步的，则需要使用闭包。

for(var i =0; i < count_model; i++){
   (function(i){// closure `i`
     $.ajax({
       type: "POST",
       ...
     });
   })(i);//<-- for loop `i`
}