MockJax 未在 JavaScript 应用程序中发送对我的 AJAX 请求的响应
MockJax is not sending response to my AJAX request in JavaScript application
我正在使用一个名为 MockAjax
的 jQuery
库,它允许您 mock/test 真正的 AJAX 调用。
在我的应用程序中,我可以使用 AJAX 请求的实时应用程序版本,MockAjax
将拦截 AJAX 请求并使用模拟响应进行响应!
我也在使用另一个名为 M<ockJson
的库,它很相似,但允许您生成 Mock JSON 响应。
同时使用这两个库,我的应用程序发出 AJAX 请求。 MockAjax
捕获 AJAX 请求,然后 MockJson
生成并 returns 一个 运行dom JSON
响应。
在我过去的项目中,直到今天这一切都很好,没有任何问题...
既然我的应用程序运行良好,我决定是时候将 JavaScript 重组为一个更结构化的版本了。 (将 DOM 事件、任务等放入代码段)。
这就是我的问题开始的地方....
在我的新代码中,
- 我的应用发出 AJAX 请求。
MockAjax
捕获 AJAX
请求。
MockJson
被调用以获得 JSON
响应
- 错误 这就是问题所在...
在这最后一步,它应该将 JSON
响应传递回原始 AJAX
调用 Success
函数。根本就没有!
我在控制台中没有收到任何错误或任何信息。我在我的 AJAX 调用 success()
函数中设置了一个简单的 alert()
,它甚至没有触发警报!
我不确定是否存在某种范围问题或可能是什么问题。当我的应用程序是扁平的时,glbal 根级别中的所有变量和函数根本没有应用程序的结构......它都有效。一旦我把所有东西都移到对象中,等等......除了第一个不将 MockAjax 响应返回到 Real Ajax 响应的问题外,一切正常!
我删除了 95% 的应用程序代码,并只用 运行 这个示例问题中的极小部分重新构建了它。问题的演示在这里... http://jsbin.com/vugeki/1/edit?js
应用流程:
projectTaskModal.init();
在页面加载时 运行
This fires off projectTaskModal.mockAjax.init();
设置 MockAjax
和 MockJson
代码
- 那么
projectTaskModal.task.openTaskModal(projectTaskModal.cache.taskId);
就是运行执行AJAX
请求
AJAX POST Request
发送到 /gettaskevents
MockAjax
捕获发送到 /gettaskevents
的请求
MockAjax
然后调用 MockJson
生成 JSON
响应。 projectTaskModal.mockAjax.generateTaskEventsJson();
调用该函数,我让它在控制台中打印 JSON 响应,这样我就可以看到它正在生成它!
- 在我的
MockAjax
代码中,var taskevents
保存 JSON
响应,然后将其设置为此... this.responseText = taskevents;
``this.responseTextI believe is what is supposed to be returned to the Applications original
AJAX` 调用。看来这就是问题所在!它似乎没有将响应返回到最初请求它的原始 AJAX 代码!
这可能是某种范围问题吗?
var projectTaskModal = {
cache: {
taskId: 1,
projectId: '12345',
},
init: function() {
projectTaskModal.mockAjax.init();
//console.log(projectTaskModal.mockAjax.init.generateTaskEventsJson());
projectTaskModal.task.openTaskModal(projectTaskModal.cache.taskId);
},
task: {
openTaskModal: function(taskId) {
// Load Task Events/Comments Panel from AJAX Request
projectTaskModal.task.loadTaskEventsPanel(taskId);
},
/**
* Load Task Events/Comments from backend Database JSON
* @param {string} jsonServerEndpoint URL for AJAX to Request
* @return {string} Generated HTML of all Task Events built from JSON
*/
loadTaskEventsPanel: function(taskId) {
// Request Task Events and Comments using AJAX Request to Server
$.ajax({
type: 'POST',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
url: '/gettaskevents',
data: {
action: 'load-task-events',
task_id: projectTaskModal.cache.taskId
},
success: function(data) {
alert('TESTING AJAX SUCCESS CALLBACK WAS CALLED!');
console.log('function loadTaskEventsPanel(taskId) DATA: ');
console.log(data);
// Parse JSON data
var taskEventsJson = data;
var task_events = taskEventsJson.task_events;
// Loop over each Task Event record returned
$.each(task_events, function(i, event) {
console.log('commentID: ' + event.commentId);
console.log('create_at DateTime: ' + event.created_at);
});
}
});
},
},
mockAjax: {
init: function(){
// Adding the @EVENT_TYPE keyword for MockJSON Template Usage
$.mockJSON.data.EVENT_TYPE = [
'Comment Created',
'Task Status Changed',
'Task Completed'
];
// Mock AJAX response for AJAX request to /gettaskevents
$.mockjax({
url: '/gettaskevents',
contentType: 'text/json',
responseTime: 2900, // Simulate a network latency of 750ms
response: function(settings) {
console.log('mockJax POST to /gettaskevents :');
//console.log(settings);
//DEBUG('Get Task Events JSON', settings.data);
if(settings.data.value == 'err') {
alert('MockAjax Error');
this.status = 500;
this.responseText = 'Validation error!';
} else {
alert('MockAjax Success');
//var taskevents = generateTaskEventsJson();
var taskevents = projectTaskModal.mockAjax.generateTaskEventsJson();
this.responseText = taskevents;
console.log(taskevents);
}
}
});
},
// Generate Mock JSON Response to load fake Task Evewnt/Comments JSON for Mock AJAX request
//var generateTaskEventsJson = function () {
generateTaskEventsJson: function() {
var mockTaskJson = $.mockJSON.generateFromTemplate({
"task_events|10-14" : [{
"commentId|+1" : 100000000,
"projectId|+1" : 100000000,
"taskId|+1" : 100000000,
"userId|+1" : 100000000,
"created_at" : "@DATE_YYYY-@DATE_MM-@DATE_DD",
"event_type" : "@EVENT_TYPE",
"userName" : "@MALE_FIRST_NAME @LAST_NAME",
"description" : "@LOREM_IPSUM @LOREM_IPSUM"
}]
});
//DEBUG('Generate Mock Task Events JSON', mockTaskJson.task_events);
//console.log(mockTaskJson.task_events);
//return mockTaskJson.task_events;
return mockTaskJson;
}
},
};
$(function() {
projectTaskModal.init();
});
您的 JSBin 示例表明您使用的是非常旧的 Mockjax 版本(1.5.0-pre)。最新的是 1.6.2,最近才发布(我现在是核心维护者)。下面是更新后的 JSBin 的 link,其中一切似乎都运行良好。您 运行 的旧版本 Mockjax 是在 jQuery 2.0 存在之前创建的,因此不支持它(1.6.2 支持)。
http://jsbin.com/qucudeleve/1/
所以...更新您的 Mockjax 版本以使用主帐户(我的)中的 Bower、npm 或仅使用 Rawgit(https://rawgit.com/jakerella/jquery-mockjax/master/jquery.mockjax.js),而不是您自己的叉子,这已经非常过时了!
祝你好运。
我正在使用一个名为 MockAjax
的 jQuery
库,它允许您 mock/test 真正的 AJAX 调用。
在我的应用程序中,我可以使用 AJAX 请求的实时应用程序版本,MockAjax
将拦截 AJAX 请求并使用模拟响应进行响应!
我也在使用另一个名为 M<ockJson
的库,它很相似,但允许您生成 Mock JSON 响应。
同时使用这两个库,我的应用程序发出 AJAX 请求。 MockAjax
捕获 AJAX 请求,然后 MockJson
生成并 returns 一个 运行dom JSON
响应。
在我过去的项目中,直到今天这一切都很好,没有任何问题...
既然我的应用程序运行良好,我决定是时候将 JavaScript 重组为一个更结构化的版本了。 (将 DOM 事件、任务等放入代码段)。
这就是我的问题开始的地方....
在我的新代码中,
- 我的应用发出 AJAX 请求。
MockAjax
捕获AJAX
请求。MockJson
被调用以获得JSON
响应- 错误 这就是问题所在...
在这最后一步,它应该将 JSON
响应传递回原始 AJAX
调用 Success
函数。根本就没有!
我在控制台中没有收到任何错误或任何信息。我在我的 AJAX 调用 success()
函数中设置了一个简单的 alert()
,它甚至没有触发警报!
我不确定是否存在某种范围问题或可能是什么问题。当我的应用程序是扁平的时,glbal 根级别中的所有变量和函数根本没有应用程序的结构......它都有效。一旦我把所有东西都移到对象中,等等......除了第一个不将 MockAjax 响应返回到 Real Ajax 响应的问题外,一切正常!
我删除了 95% 的应用程序代码,并只用 运行 这个示例问题中的极小部分重新构建了它。问题的演示在这里... http://jsbin.com/vugeki/1/edit?js
应用流程:
projectTaskModal.init();
在页面加载时 运行This fires off projectTaskModal.mockAjax.init();
设置MockAjax
和MockJson
代码- 那么
projectTaskModal.task.openTaskModal(projectTaskModal.cache.taskId);
就是运行执行AJAX
请求 AJAX POST Request
发送到/gettaskevents
MockAjax
捕获发送到/gettaskevents
的请求
MockAjax
然后调用MockJson
生成JSON
响应。projectTaskModal.mockAjax.generateTaskEventsJson();
调用该函数,我让它在控制台中打印 JSON 响应,这样我就可以看到它正在生成它!- 在我的
MockAjax
代码中,var taskevents
保存JSON
响应,然后将其设置为此...this.responseText = taskevents;
``this.responseTextI believe is what is supposed to be returned to the Applications original
AJAX` 调用。看来这就是问题所在!它似乎没有将响应返回到最初请求它的原始 AJAX 代码!
这可能是某种范围问题吗?
var projectTaskModal = {
cache: {
taskId: 1,
projectId: '12345',
},
init: function() {
projectTaskModal.mockAjax.init();
//console.log(projectTaskModal.mockAjax.init.generateTaskEventsJson());
projectTaskModal.task.openTaskModal(projectTaskModal.cache.taskId);
},
task: {
openTaskModal: function(taskId) {
// Load Task Events/Comments Panel from AJAX Request
projectTaskModal.task.loadTaskEventsPanel(taskId);
},
/**
* Load Task Events/Comments from backend Database JSON
* @param {string} jsonServerEndpoint URL for AJAX to Request
* @return {string} Generated HTML of all Task Events built from JSON
*/
loadTaskEventsPanel: function(taskId) {
// Request Task Events and Comments using AJAX Request to Server
$.ajax({
type: 'POST',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
url: '/gettaskevents',
data: {
action: 'load-task-events',
task_id: projectTaskModal.cache.taskId
},
success: function(data) {
alert('TESTING AJAX SUCCESS CALLBACK WAS CALLED!');
console.log('function loadTaskEventsPanel(taskId) DATA: ');
console.log(data);
// Parse JSON data
var taskEventsJson = data;
var task_events = taskEventsJson.task_events;
// Loop over each Task Event record returned
$.each(task_events, function(i, event) {
console.log('commentID: ' + event.commentId);
console.log('create_at DateTime: ' + event.created_at);
});
}
});
},
},
mockAjax: {
init: function(){
// Adding the @EVENT_TYPE keyword for MockJSON Template Usage
$.mockJSON.data.EVENT_TYPE = [
'Comment Created',
'Task Status Changed',
'Task Completed'
];
// Mock AJAX response for AJAX request to /gettaskevents
$.mockjax({
url: '/gettaskevents',
contentType: 'text/json',
responseTime: 2900, // Simulate a network latency of 750ms
response: function(settings) {
console.log('mockJax POST to /gettaskevents :');
//console.log(settings);
//DEBUG('Get Task Events JSON', settings.data);
if(settings.data.value == 'err') {
alert('MockAjax Error');
this.status = 500;
this.responseText = 'Validation error!';
} else {
alert('MockAjax Success');
//var taskevents = generateTaskEventsJson();
var taskevents = projectTaskModal.mockAjax.generateTaskEventsJson();
this.responseText = taskevents;
console.log(taskevents);
}
}
});
},
// Generate Mock JSON Response to load fake Task Evewnt/Comments JSON for Mock AJAX request
//var generateTaskEventsJson = function () {
generateTaskEventsJson: function() {
var mockTaskJson = $.mockJSON.generateFromTemplate({
"task_events|10-14" : [{
"commentId|+1" : 100000000,
"projectId|+1" : 100000000,
"taskId|+1" : 100000000,
"userId|+1" : 100000000,
"created_at" : "@DATE_YYYY-@DATE_MM-@DATE_DD",
"event_type" : "@EVENT_TYPE",
"userName" : "@MALE_FIRST_NAME @LAST_NAME",
"description" : "@LOREM_IPSUM @LOREM_IPSUM"
}]
});
//DEBUG('Generate Mock Task Events JSON', mockTaskJson.task_events);
//console.log(mockTaskJson.task_events);
//return mockTaskJson.task_events;
return mockTaskJson;
}
},
};
$(function() {
projectTaskModal.init();
});
您的 JSBin 示例表明您使用的是非常旧的 Mockjax 版本(1.5.0-pre)。最新的是 1.6.2,最近才发布(我现在是核心维护者)。下面是更新后的 JSBin 的 link,其中一切似乎都运行良好。您 运行 的旧版本 Mockjax 是在 jQuery 2.0 存在之前创建的,因此不支持它(1.6.2 支持)。
http://jsbin.com/qucudeleve/1/
所以...更新您的 Mockjax 版本以使用主帐户(我的)中的 Bower、npm 或仅使用 Rawgit(https://rawgit.com/jakerella/jquery-mockjax/master/jquery.mockjax.js),而不是您自己的叉子,这已经非常过时了!
祝你好运。