直接处理来自AJAX请求的数据

Question

Within my .NET MVC web project I got this javascript to get data when the user clicks a button.

<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>

The data returned will be displayed here:

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

The problem I have is that I only get the inner HTML when I click the button twice, but I want to have the data available directly.

Answer 1

you can use callback for this problem.

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());
    }

}

also you can use ajax with callback