jquery ajax jsonp 和 angularjs $http json 的区别

Posted 2023-03-03

【中文标题】jquery ajax jsonp 和 angularjs $http json 的区别

【英文标题】：Difference between jquery ajax jsonp and angularjs $http json

【发布时间】：2020-05-03 09:49:14

【问题描述】：

我正在尝试将用 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);
    
  );
;

【问题讨论】：

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

【参考方案1】：

来自文档：

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

有关详细信息，请参阅

AngularJS $http Service API Reference - jsonp Method