javascript - 如何在新函数中使用带有 OnChange 的文本框中的值？

Question

这是我正在尝试做的事情:

1. 我从 PHP 获取一个值并将其放入文本框(函数 1)。那很好用。
2. 我正在尝试在另一个 PHP 查询(函数 2)中使用该值。不能正常工作。

这两个函数应该在加载页面时开始，并且必须保留在单独的函数中。问题:第一个函数的结果变量在第二个函数中找不到。正如我试图在代码中指出的那样，变量“seizoen”在第二个函数中保持为空。知道我在这里做错了什么或如何解决这个问题吗？

<input type="text" id="Seizoen_text" OnChange="getCompetitie()>

<select id="Competitie_list"></select>

window.onload = function() {
    getSeizoen();    
    getCompetitie();
};

function getSeizoen() {
    $.ajax({
        type:'POST',
        url:'get_seizoen.inc.php',
        dataType: 'json', 
        success: function(response){
            var maxseizoen = response[0]['MaxSeizoen'];
            $("#Seizoen_text").val(maxseizoen);
        }
    });
}

function getCompetitie() {
    seizoen = $("#Seizoen_text").val();
    alert(seizoen);  //  **--> EMPTY !**
    $.ajax({
        type:'POST',
        url:'get_competitie.inc.php',
        dataType: 'json', 
        data: {seizoen: seizoen},
        success: function(response){
            $("#Competitie_list").empty();
            var len = response.length;
            for(var i = 0; i < len; i++){
                var competitievorm = response[i]['Competitie'];
                $("#Competitie_list").append("<option value='"+competitievorm+"'>"+competitievorm+"</option>");
            }
        }
    });
}

Answer 1

问题可能出在异步调用上。

发生的事情是 getSeizoen() 在窗口加载时被调用，但它执行的是 ajax 调用。当 ajax 调用在服务器上执行时，在此期间 getCompetitie() 也会被调用。

在 getCompetitie() 中，您正在填充变量 seizoen = $("#Seizoen_text").val(); 但文本框可能没有值然而(因为它是一个异步调用)。

我建议从 window.load 事件中删除对 getCompetitie() 的调用，并在第一个 ajax 完成后调用它。有多种方法可以做到这一点，但您可以这样做:

function getSeizoen()
{
    $.ajax({
        type:'POST',
        url:'get_seizoen.inc.php',
        dataType: 'json', 
        success: function(response){
            var maxseizoen = response[0]['MaxSeizoen'];
            $("#Seizoen_text").val(maxseizoen);
            getCompetitie(); // added call here on success
        }
    });
}