Работать напрямую с данными из запроса AJAX

Question

В моем веб-проекте .NET MVC я получил этот javascript для получения данных, когда пользователь нажимает кнопку.

<script type="text/jscript">

        async function firstFunction() {
            var url = "/Home/CheckPrinter?printer=" + document.getElementById("printerName").value;
            $.get(url, null, function (data) {
                $("#msgPrinterName").html(data);
            });            
            var e = document.getElementById("ddlViewBy");
            var deviceType = e.options[e.selectedIndex].text;
            var url2 = "/Home/CheckIfValidIP?input=" + document.getElementById("ipAddress").value + "&type=" + deviceType;
            $.get(url2, null, function (data2) {
                $("#msgIPPort").html(data2);
            });            
            var url3 = "/Home/CheckPrintService?printer=" + document.getElementById("printerName").value;
            $.get(url3, null, function (data3) {
                $("#msgPrintService").html(data3);
            });
        };

        async function secondFunction() {
            await firstFunction();
            console.log($("#msgPrinterName").html());
            console.log($("#msgIPPort").html());
            console.log($("#msgPrintService").html());

            // now wait for firstFunction to finish...
            // do something else
        };
    </script>

Возвращенные данные будут отображаться здесь:

<div id="alerts">
                        <p id="msgPrinterName">
                        </p>
                        <br />
                        <p id="msgIPPort">
                        </p>
                        <br />
                        <p id="msgPrintService">
                        </p>
                        <p id="msgButton">
                        </p>
                    </div>

У меня проблема в том, что я получаю внутренний HTML только когда дважды нажимаю на кнопку, но хочу, чтобы данные были доступны напрямую.

Answer 1

вы можете использовать обратный вызов для этой проблемы.

function firstFunction(callback) {
     ....
      $.get(url3, null, function (data3) {
            $("#msgPrintService").html(data3);
        }).done(function(){callback();});
}

function secondFunction() {

    firstFunction(function(){
        console.log($("#msgPrinterName").html());
        console.log($("#msgIPPort").html());
        console.log($("#msgPrintService").html());
    }

}

также вы можете использовать ajax с обратным вызовом