Jquery .ajax 函数在已经跳到下一行代码后返回对象的问题

Question

我正在使用 JQUERY 和 AJAX，目前看来该函数可以正常工作，但在下一行代码运行之后。这意味着当脚本旨在将对象添加到 html 时，它会添加一个空值。

我使用此功能的目的是，在更改下拉菜单时，它会从我的后端（asp.net）中抓取一个对象并添加到我的 HTML 中。

var machineDetails=[];
        function getMachineDetails(SelectedMachine) {
            var urlMachines = '@Url.ActionLink("GetMachineDetails", "Home")';
            $.ajax({
                type: 'GET',
                url: urlMachines,
                contentType: 'application/json; charset=utf-8',
                data: { SelectedMachine : SelectedMachine} ,
                dataType: 'json',
                crossDomain: true,
                complete: function (response, status, xhr) {

                    return machineDetails = response.responseJSON;

                },
                failure: function (xhr, ajaxOptions, thrownError) {
                    alert("Error: " + thrownError);
                }
            });

        }
        $('#SelectMachines').change(function () {

            removeAllChildren('MachineDetailsDisplay');
            var SelectedMachine = $('#SelectMachines option:selected');
            getMachineDetails(SelectedMachine[0].value);
            var MachineObject = machineDetails;
            console.log(MachineObject);
            $('#MachineDetailsDisplay').append(
                machineDetails);
        });

Answer 1

发生这种情况是因为此时您尝试使用machineDetails ajax 调用尚未完成。您应该等待结果，然后运行您的代码。解决方法之一如下：

var machineDetails=[];
        function getMachineDetails(SelectedMachine) {
            var urlMachines = '@Url.ActionLink("GetMachineDetails", "Home")';
            return $.ajax({  // <== return jqXHR object
                type: 'GET',
                url: urlMachines,
                contentType: 'application/json; charset=utf-8',
                data: { SelectedMachine : SelectedMachine} ,
                dataType: 'json',
                crossDomain: true
            });

        }
        $('#SelectMachines').change(function () {

            removeAllChildren('MachineDetailsDisplay');
            var SelectedMachine = $('#SelectMachines option:selected');
            getMachineDetails(SelectedMachine[0].value)
            .done(function(data) { // <== execute your code when ajax returns the results
               var MachineObject = JSON.parse(data);
               console.log(MachineObject);
               $('#MachineDetailsDisplay').append(
                machineDetails);
            });
            
        });