jquery - Uncaught ReferenceError : data is not defined in doing a math calculation in jQuery

Question

我正在尝试做数学题，但我遇到了数据未定义的问题。

这是完整的脚本

<script>
$(document).ready(function(){
    fetch_loan_interest();
    function fetch_loan_interest(query = '')
    {
        $.ajax({
            url:"{{ route('live_search.viewInterest') }}",
            method:'GET',
            data:{query:query},
            dataType:'json',
            success:function(data)
            {
                $('#label_initial').text(data.label_initial);
                $('#interest_initial').text('Addition '+data.interest_initial+'% interest');
                $('#trigger_day_count_initial').text(data.trigger_day_count_initial);      
            }
        })
    }

    $(document).on('change', '#loan_duration_id', function(){
        var query = $(this).val();
        fetch_loan_interest(query);       
    });

    $(document).on('keyup', '#req_amount', function(){
        var req_amount = $(this).val();
        var reqAmountWithInterest = interest_initial; 
        $("#req_amount_text").text(req_amount);

        // var reqAmountWithInterest = data.interest_initial;
        var reqAmountWithInterest = req_amount * data.interest_initial;
        $("#reqAmountWithInterest").text(reqAmountWithInterest);


    });

  // if(req_amount > 0) {   
  // }
});
</script>

我可以显示这部分

但是当我尝试进行数学计算时，

var reqAmountWithInterest = req_amount * data.interest_initial;

出现了未捕获的问题。

你能帮我吗？提前致谢!

Answer 1

所以它的说法数据没有定义。因为它没有定义意味着它超出了范围

function fetch_loan_interest(query = '') {
    $.ajax({
        url: "{{ route('live_search.viewInterest') }}",
        method: 'GET',
        data: {
            query: query
        },
        dataType: 'json',
        success: function (data) // <- Data is defined there and you can access it within this function block.
        {
            $('#label_initial').text(data.label_initial);
            $('#interest_initial').text('Addition ' + data.interest_initial + '% interest');
            $('#trigger_day_count_initial').text(data.trigger_day_count_initial);
        }
    })
}

$(document).on('keyup', '#req_amount', function () {
    var req_amount = $(this).val();
    var reqAmountWithInterest = interest_initial;
    $("#req_amount_text").text(req_amount);
    // var reqAmountWithInterest = data.interest_initial;
    var reqAmountWithInterest = req_amount * data.interest_initial; // Data is not defined in this scope and this block is not inside the ajax
    // response function block so you wont be able to access data here
    $("#reqAmountWithInterest").text(reqAmountWithInterest);
});

如果您的目的是根据 ajax 请求的响应初始化金额，您应该输入此 var reqAmountWithInterest = req_amount * data.interest_initial;在另一个函数中，定义了数据。另一种可能性是在外部作用域中定义外部变量并将数据分配给该变量。换句话说，例如这里

$(document).ready(function(){
  var myFutureData = null

然后是你的成功函数:

function fetch_loan_interest(query = '') {
    $.ajax({
        url: "{{ route('live_search.viewInterest') }}",
        method: 'GET',
        data: {
            query: query
        },
        dataType: 'json',
        success: function (data) // <- Data is defined there and you can access it within this function block.
        {
            $('#label_initial').text(data.label_initial);
            $('#interest_initial').text('Addition ' + data.interest_initial + '% interest');
            $('#trigger_day_count_initial').text(data.trigger_day_count_initial);
            myFutureData = data;
        }
    });
}

请注意，一旦运行 success 函数，数据将在 myFutureData 上可用。因此，如果您的 keyup 事件发生在调用 success 函数之前，您将无法得到您想要的结果。

我认为最干净的选择是使用 promise :

function fetch_loan_interest(query = '') {
    $.ajax({
        url: "{{ route('live_search.viewInterest') }}",
        method: 'GET',
        data: {
            query: query
        },
        dataType: 'json',
        success: function (data) // <- Data is defined there and you can access it within this function block.
        {
            $('#label_initial').text(data.label_initial);
            $('#interest_initial').text('Addition ' + data.interest_initial + '% interest');
            $('#trigger_day_count_initial').text(data.trigger_day_count_initial);
            myFutureData = data;
        }
    });
}

现在在 responsePromise 中，您有一个 Promise 对象来保存您的数据，以便您可以执行以下操作:

myPromise.done(function (data) {
    $('#label_initial').text(data.label_initial);
    $('#interest_initial').text('Addition ' + data.interest_initial + '% interest');
    $('#trigger_day_count_initial').text(data.trigger_day_count_initial);
});

对于您的事件也有同样的想法。因为你的 promise 在范围内。完成后可确保您拥有数据。

希望对你有帮助