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

Question

我正在使用jQuery名为 MockAjax 的库它允许您模拟/测试真实的 AJAX 调用。

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

我还使用另一个名为 M<ockJson 的库这很相似，但允许您生成模拟 JSON 响应。

同时使用这两个库，我的应用程序发出 AJAX 请求。 MockAjax捕获 AJAX 请求，然后 MockJson生成并返回随机 JSON回应。

在我过去的项目中，直到今天为止，这一直很有效，没有出现任何问题......

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

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

在我的新代码中，

1. 我的应用发出 AJAX 请求。
2. MockAjax捕获AJAX请求。
3. MockJson调用以获取 JSON回应
4. 错误这就是一切出错的地方......

在最后一步，它应该通过 JSON回复原文AJAX来电 Success功能。它根本就没有!

我在控制台中没有收到任何错误或任何内容。我设置了一个简单的alert()在我的 AJAX 调用中success()函数，但它并没有达到触发警报的程度!

我不确定是否存在某种范围问题或问题可能是什么。当我的应用程序平坦时，全局根级别中的所有变量和函数根本没有应用程序的结构......这一切都有效。一旦我将所有内容移至对象等中，一切都正常，除了这 1 个不将 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.responseText I 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();
});

Answer 1

您的 JSBin 示例表明您使用的是非常旧的 Mockjax 版本(1.5.0-pre)。最新的是1.6.2，最近发布的(我现在是核心维护者)。下面是更新的 JSBin 的链接，其中一切似乎都工作正常。您运行的旧版本 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 )，而不是你自己的分支，这已经非常过时了!

祝你好运。