Difference between jquery ajax jsonp and angularjs $http json

Question

I'm trying to migrate a feature which was written in jquery to angularjs. So instead of using jquery's ajax method, I am trying to use angularjs' $http method. The code allows a user to sign up for a mailchimp newsletter. Interestingly, when I use the jquery method, there are no issues. However, when I use the angularjs method, I get a 404 error, even though I can see in the network requests that a response from mailchimp is available. What am I doing wrong with angularjs?

I will post the two snippets of code bellow:

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);
    }
  });
};

I can't help specifically, but to diagnose the issue look at both requests in the network tab of dev tools and look for differences. — Rory McCrossan
– Rory McCrossan, Commented Jan 16, 2020 at 14:31

georgeawg · Accepted Answer · 2020-01-16 21:53:56Z

1

From the Docs:

Note that, since JSONP requests are sensitive because the response is given full access to the browser, the url must be declared, via $sce as a trusted resource URL. You can trust a URL by adding it to the whitelist via $sceDelegateProvider.resourceUrlWhitelist or by explicitly trusting the URL via $sce.trustAsResourceUrl(url).

For more information, see

AngularJS $http Service API Reference - jsonp Method

edited Jan 16, 2020 at 21:53

answered Jan 16, 2020 at 21:38

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Difference between jquery ajax jsonp and angularjs $http json

AngularJS

jQuery ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

AngularJS

jQuery ajax

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related