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

Posted 2023-05-09

【中文标题】$.extend 中的 AJAX 函数在 jQuery 3 中不起作用

【英文标题】：AJAX function inside $.extend not working in 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() 没有什么特别之处。它只是一个普通函数，对变量范围没有影响。它所做的只是合并对象。

【参考方案1】：

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