使用jQuery Ajax结果填充自定义JavaScript对象
Populate Custom JavaScript Object With jQuery Ajax Results
如果这是一个重复的问题,我很抱歉,但我找不到有效的答案。
我有一个.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 */
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。
相关文章:
- 表达式引擎扩展开发-向呈现的条目添加自定义javascript
- Can用户'MediaWiki上的自定义JavaScript调用Lua模块
- 动态加载的自定义javascript/jQuery/HTML5音频播放器的问题
- 使用drupal中自定义javascript文件中的一个函数
- 使用浏览器在页面(客户端)上运行自定义JavaScript来模拟点击?怎么做
- 使用谷歌地图:一个返回undefined的自定义javascript函数
- target=“_空白“;使用自定义javascript生成的html页面
- Meteor:选择自定义javascript和自定义css作为模板
- 用自定义javascript全局命名空间替换窗口
- 为什么自定义 JavaScript 文件放在客户端文件夹中时不在我的 Meteor 模板上呈现
- 创建自定义 Javascript 对象的惯用方法有哪些
- 当通过选择页面上所有复选框的 jQuery 脚本选中复选框时,如何触发自定义 javascript 事件
- 我的自定义javascript旋转木马无法正常工作
- 自定义javascript日期
- 如何在联系人表单7 Wordpress中添加自定义javascript函数
- 如何获取从jQuery click()函数调用的特定于标记的自定义Javascript函数
- 自定义javascript开/关开关可以'I don’我不去上班
- 自定义Javascript Alert Popup onclick svg路径
- 定义自定义JavaScript异常的较短方法
- 如何在PlayN中添加对自定义JavaScript事件触发器的支持