使用jQuery Ajax结果填充自定义JavaScript对象

Populate Custom JavaScript Object With jQuery Ajax Results

本文关键字:自定义 JavaScript 对象 填充 结果 jQuery Ajax 使用      更新时间:2023-09-26

如果这是一个重复的问题,我很抱歉,但我找不到有效的答案。

我有一个.aspx页面,它正在调用一个填充基本员工信息的Web服务。当我在自定义对象之外调用服务时,它非常有效。一旦我将ajax功能移动到自定义对象中,我就失去了作用域,无法填充对象属性。我可以看到服务通过Firebug在json中返回数据,但对象的属性没有被填充。非常感谢在这方面的任何帮助。自定义对象JavaScript如下。

/* Begin Employee JavaScript object */
//Define the Employee object
function Employee() {}
//Define the Employee object's properties on the prototype
Employee.prototype = {
    //Properties
    EmployeeNumber: '',
    FirstName: '',
    LastName: '',
    ErrorMessage: '',
    IsFound: false
}
//Define the Search function
Employee.prototype.employeeSearch = function (pEmplNo, callback) {
    $.ajax({
        context: this,
        type: "POST",
        url: "webservice URL",
        data: '{"pEmployeeNumber":"' + pEmplNo + '"}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            var me = this;
            me.EmployeeNumber = msg.d.EmployeeNumber;
            me.FirstName = msg.d.FirstName;
            me.LastName = msg.d.LastName;
            me.ErrorMessage = '';
            me.IsFound = true;
            callback(me);
        },
        error: function () {
            var me = this;
            me.ErrorMessage = 'Error retrieving employee';
            me.IsFound = false;
        }
    });
}
/* End Employee JavaScript object */
function SetEmployeeFields(pEmployee) {
    $('#<%= txtEmployeeNumber.ClientID %>').val(pEmployee.EmployeeNumber);
    $('#<%= txtFirstName.ClientID %>').val(pEmployee.FirstName);
    $('#<%= txtLastName.ClientID %>').val(pEmployee.LastName);
}
function FindEmployee(emplNo) {
    $("#mdlGetEmployeeDialog").dialog('open');
    if (emplNo.length < 6) {
        while (emplNo.length < 6) {
            emplNo = "0" + emplNo;
        }
        $('#<%= txtEmployeeNumber.ClientID %>').val(emplNo);
    }
    var _employee = new Employee();
    _employee.employeeSearch(emplNo, function () {
        if (_employee.IsFound) {
            SetEmployeeFields(_employee);
            $('#<%= txtNature.ClientID %>').focus();
            $("#mdlGetEmployeeDialog").dialog('close');
        }
        else {
            $('#<%= lblMessage.ClientID %>').text('Could not find employee' + _employee.ErrorMessage);
            $('#<%= upErrors.ClientID %>').addClass("ui-state-error").css({ "padding": "4px", "margin-top": "4px" }).show();
            $("#mdlGetEmployeeDialog").dialog('close');
        }
    });
}
//Sets up the Employee Search modal and button
function SetupGetEmployeeModal() {
    $("#mdlGetEmployeeDialog").dialog({
        autoOpen: false,
        modal: true,
        width: 500
    });
    $("#btnEmployeeSearch").button({
        text: false,
        icons: {
            primary: "ui-icon-search"
        }
    }).css({
        'padding': '4px 0px 4px 0px',
        'font-size': '9px',
        'margin-left': '3px'
    });
}
$(function () {
    $('#btnEmployeeSearch').click(function (e) {
        e.preventDefault();
        var emplNo = $('#<%= txtEmployeeNumber.ClientID %>').val();
        if (emplNo !== '' && emplNo !== '######') {
            $('#<%= lblMessage.ClientID %>').text('');
            $('#<%= upErrors.ClientID %>').removeClass('ui-state-error').removeAttr('style').hide();
            FindEmployee(emplNo);
        }
        else {
            $('#<%= lblMessage.ClientID %>').text('Employee Number required');
            $('#<%= upErrors.ClientID %>').addClass("ui-state-error").css({ "padding": "4px", "margin-top": "4px" }).show();
            $("#mdlGetEmployeeDialog").dialog('close');
        }
    });
});
/* End Page Scripts */
Ajax是异步的。你需要在employeeSearch方法中添加一个回调,这样你就可以对它的成功采取行动。
Employee.prototype.employeeSearch = function (pEmplNo,callback) {
    ...
            success: function (msg) {
                this.EmployeeNumber = msg.d.EmployeeNumber;
                this.FirstName = msg.d.FirstName;
                this.LastName = msg.d.LastName;
                this.ErrorMessage = '';
                this.IsFound = true;
                callback(this);
            },
    ...
}

现在,稍后使用回调:

var _employee = new Employee();
_employee.employeeSearch(emplNo, function () {
    if (_employee.IsFound) {
        SetEmployeeFields(_employee);
        $("#mdlGetEmployeeDialog").dialog('close');
    }
    else {
        $('#<%= lblMessage.ClientID %>').text('Could not find employee'+ _employee.ErrorMessage);
        $('#<%= upErrors.ClientID %>').addClass("ui-state-error").css({ "padding": "4px", "margin-top": "4px" }).show();
        $("#mdlGetEmployeeDialog").dialog('close');
    }
});

您需要在回调函数中确定变量的范围:

success: function (msg) {
    this.EmployeeNumber = msg.d.EmployeeNumber;
    this.FirstName = msg.d.FirstName;
    this.LastName = msg.d.LastName;
    this.ErrorMessage = '';
    this.IsFound = true;            
},
error: function () {
    this.ErrorMessage = 'Error retrieving employee';
    this.IsFound = false;
}

编辑:

因此,看起来您的属性正在设置中,但由于它是异步的,还没有填充,您应该将其移动到ajax回调:

if (_employee.IsFound) {
        SetEmployeeFields(_employee);
        $("#mdlGetEmployeeDialog").dialog('close');
    }
    else {
        $('#<%= lblMessage.ClientID %>').text('Could not find employee'+ _employee.ErrorMessage);
        $('#<%= upErrors.ClientID %>').addClass("ui-state-error").css({ "padding": "4px", "margin-top": "4px" }).show();
        $("#mdlGetEmployeeDialog").dialog('close');
    }

正如Kevin-B所指出的,除了确定属性的范围外,您还必须在success方法中执行调用employeeSearch之后的代码。

Javascript是异步的,所以在进行ajax调用之后,执行其余的代码。

您可以做的另一件事是使用一个库来帮助您进行同步调用。使用这样的库,您可以使代码在ajax调用返回时执行。

看看这里。

另一个快速解决方案是添加一个仅在调用成功或错误函数时设置的标志变量,并在函数调用后添加一个while循环,将该标志变量作为条件。

Employee.prototype.employeeSearch = function (pEmplNo) {
     $.ajax({
        context: this,
        type: "POST",
        url: "webservice URL",
        data: '{"pEmployeeNumber":"' + pEmplNo + '"}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            var me = this;
            me.EmployeeNumber = msg.d.EmployeeNumber;
            me.FirstName = msg.d.FirstName;
            me.LastName = msg.d.LastName;
            me.ErrorMessage = '';
            me.IsFound = true;   
            me.searchEnded = true;
        },
        error: function () {
            var me = this;
            me.ErrorMessage = 'Error retrieving employee';
            me.IsFound = false;   
            me.searchEnded = true;
        }
     });
     while(!this.searchEnded)
     {
     }
}

此外,如果您需要调用具有不同作用域的函数,请查看apply和call。