Question

我正在使用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论文中，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`
}

Answer 2

您的问题是回调中的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，此时内部回调函数中的值变为固定。

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

2 个答案: