MockJax 未在 JavaScript 应用程序中发送对我的 AJAX 请求的响应

MockJax is not sending response to my AJAX request in JavaScript application

我正在使用一个名为 MockAjaxjQuery 库,它允许您 mock/test 真正的 AJAX 调用。

在我的应用程序中,我可以使用 AJAX 请求的实时应用程序版本,MockAjax 将拦截 AJAX 请求并使用模拟响应进行响应!

我也在使用另一个名为 M<ockJson 的库,它很相似,但允许您生成 Mock JSON 响应。

同时使用这两个库,我的应用程序发出 AJAX 请求。 MockAjax 捕获 AJAX 请求,然后 MockJson 生成并 returns 一个 运行dom JSON 响应。

在我过去的项目中,直到今天这一切都很好,没有任何问题...

既然我的应用程序运行良好,我决定是时候将 JavaScript 重组为一个更结构化的版本了。 (将 DOM 事件、任务等放入代码段)。

这就是我的问题开始的地方....

在我的新代码中,

  1. 我的应用发出 AJAX 请求。
  2. MockAjax 捕获 AJAX 请求。
  3. MockJson 被调用以获得 JSON 响应
  4. 错误 这就是问题所在...

在这最后一步,它应该将 JSON 响应传递回原始 AJAX 调用 Success 函数。根本就没有!

我在控制台中没有收到任何错误或任何信息。我在我的 AJAX 调用 success() 函数中设置了一个简单的 alert(),它甚至没有触发警报!

我不确定是否存在某种范围问题或可能是什么问题。当我的应用程序是扁平的时,glbal 根级别中的所有变量和函数根本没有应用程序的结构......它都有效。一旦我把所有东西都移到对象中,等等......除了第一个不将 MockAjax 响应返回到 Real Ajax 响应的问题外,一切正常!

我删除了 95% 的应用程序代码,并只用 运行 这个示例问题中的极小部分重新构建了它。问题的演示在这里... http://jsbin.com/vugeki/1/edit?js

应用流程:

这可能是某种范围问题吗?

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),而不是您自己的叉子,这已经非常过时了!

祝你好运。