jquery ajax jsonp 和 angularjs $http json 的区别答案

【问题标题】：Difference between jquery ajax jsonp and angularjs $http jsonjquery ajax jsonp 和 angularjs $http json 的区别
【发布时间】：2023-03-11 02:37:01
【问题描述】：

我正在尝试将用 jquery 编写的功能迁移到 angularjs。因此，我没有使用 jquery 的 ajax 方法，而是尝试使用 angularjs 的 $http 方法。该代码允许用户注册 mailchimp 时事通讯。有趣的是，当我使用 jquery 方法时，没有任何问题。但是，当我使用 angularjs 方法时，我收到 404 错误，即使我可以在网络请求中看到来自 mailchimp 的响应可用。我在用 angularjs 做错了什么？

下面我会贴出两个sn-ps的代码：

AngularJS

 $http({
    method: "JSONP",
    url:
      "https://XXX.us4.list-manage.com/subscribe/post-json? 
       u=XXX&amp&id=XXX&c=?",
    params: { EMAIL: this.text },
  }).then(
    function successCallback(response) {
      console.log("success");
      console.log(response);
    },
    function errorCallback(response) {
      console.log("error");
      console.log(response);
    }
  );

jQuery ajax

  function successCallback(resp) {
    console.log(resp);
  }

  $.ajax({
    url:
      "https://XXX.us4.list-manage.com/subscribe/post-json? 
       u=XXX&amp&id=XXX&c=?",
    data: { EMAIL: this.text },
    success: successCallback,
    dataType: "jsonp",
    error: function(resp, text) {
      console.log("mailchimp ajax submit error: " + text);
    }
  });
};

【问题讨论】：

我无法具体提供帮助，但要诊断问题，请查看开发工具的网络选项卡中的两个请求并查找差异。

标签： jquery angularjs ajax jsonp mailchimp

【解决方案1】：

来自文档：

请注意，由于 JSONP 请求是敏感的，因为响应被授予对浏览器的完全访问权限，因此必须通过 $sce 将 url 声明为受信任的资源 URL。您可以通过 $sceDelegateProvider.resourceUrlWhitelist 将 URL 添加到白名单或通过 $sce.trustAsResourceUrl(url) 显式信任 URL 来信任 URL。

有关详细信息，请参阅

AngularJS $http Service API Reference - jsonp Method

【讨论】：