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

For loop is not working properly in Javascript function

本文关键字：常工作 工作 循环 Javascript 函数 For      更新时间：2023-09-26

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

我的主要目标是向PHP页面发送ajax请求，并获得我已经完成的响应。

问题是，当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中，这两行只显示了第三次的值，而不是第一次和第二次。但我收到了所有3次的回复。

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

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

请帮助我在哪里做了错误的

问题是$。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`
}

您的问题是回调中的i不再具有注册回调时的值。这是一个非常常见的问题。

一个常见的解决方案是"关闭"变量i，使其保留正确的值：

success: (function(i) {
    return function(response) {
        var result = response.split('|');
        document.getElementById('rental_price_multi'+i).value=result[0];
        document.getElementById('tax_multi'+i).value=result[1];
    })(i)

外部函数作为参数传递i，此时其在内部回调函数中的值变为固定值。

相关文章：