$.extend 中的 AJAX 函数在 jQuery 3 中不起作用答案

【问题标题】：AJAX function inside $.extend not working in jQuery 3$.extend 中的 AJAX 函数在 jQuery 3 中不起作用
【发布时间】：2020-01-02 05:09:12
【问题描述】：

我需要扩展 jQuery（作为插件）。问题是，$.ajax 在$.extend 范围内不起作用，但在范围之外它工作正常。我在我的项目中使用jQuery 3.4.1。

我的代码：

(function($) {
  jQuery.extend({
    mmw: function(options) {

      var settings = $.extend({
        mtarget: "#cnapp-mmw",
        imgSize: "square",
        imgRestricted: true,
        imgtype: ["gif", "png", "jpg", "jpeg", "pdf"]
      }, options);

      $.ajax({
        type: "GET",
        url: "http://example.com/public/get-media",
        dataType: "html",
        success: function(data) {
          alert(data);
        },
        error: function(e) {
          alert(e); // Showing this as outout [object Object]
        }
      });
    }
  })
})

但这显示了正确的输出：

(function($) {

  $.ajax({
    type: "GET",
    url: "http://example.com/public/get-media",
    dataType: "html",
    success: function(data) {
      alert(data); // This is showing the proper output
    },
    error: function(e) {
      alert(e);
    }
  });

  jQuery.extend({
    mmw: function(options) {

      var settings = $.extend({
        mtarget: "#cnapp-mmw",
        imgSize: "square",
        imgRestricted: true,
        imgtype: ["gif", "png", "jpg", "jpeg", "pdf"]
      }, options);
    }
  })
})

我的第一个代码有什么问题？ jQuery 3 有什么不同吗？

请注意，我需要在没有选择器的情况下调用这个插件

    $(".trigger").on('click', function(){
        $.mmw();
    });

$.extend 是必须的功能吗？我们将不胜感激地收到有关此最佳实践的任何建议。

更新

经过多次调试，我发现 AJAX 请求在任何块或事件中都不起作用。我将它与Codeigniter 4 (beta 4) 一起使用。

这显示错误

    $(".trigger").on('click', function(){
        $.ajax({
            type: "GET",
            url: "http://example.com/public/get-media",
            dataType: "html",
            success: function(data){ alert("Ok"); },
            error: function(e){ alert(JSON.stringify(e)); } // Showing error message {"readyState":0,"status":0,"statusText":"TypeError: Cannot read property 'open' of undefined"}
        });
    });

但这显示了正确的数据

    $.ajax({
        type: "GET",
        url: "<?=base_url('test/'.session_id())?>",
        dataType: "html",
        success: function(data){ alert(data); }, // Showing the Data
        error: function(e){ alert(JSON.stringify(e)); }
    });

    $(".trigger").on('click', function(){

    });

意味着 Ajax 函数只能在范围之外工作。真的很困惑。

【问题讨论】：

不工作是什么意思？由于 AJAX 调用在 mmw 函数中，因此在您使用 $.mmw() 之前不会调用它。
@Barmar，请看一下我的代码的 last sn-p。在点击事件调用插件后，它显示错误alert(e); 我已在我的第一个 sn-p 中注释掉。
控制台有错误吗？使用“网络”选项卡查看 AJAX 请求是如何发出的，以及响应是什么。
你不必使用$.extend，你可以使用$.mmw = function() { ... }。但是这两个sn-ps是非常不同的。第一个在点击后进行 AJAX 调用，第二个仅在页面第一次加载时进行 AJAX 调用。
jQuery.extend() 没有什么特别之处。它只是一个普通函数，对变量范围没有影响。它所做的只是合并对象。

标签： javascript jquery ajax jquery-plugins jquery-3

【解决方案1】：

在我使用 CI 4（beta 4）时，上述代码与 CI 4 用于调试工具的 Javascript 之间存在冲突。该错误仅在“开发”环境中生成。在“生产”环境中，一切正常。

【讨论】：