jQuery Ajax POST not working with MailChimp

Question

I have the following code I am using to send data to a MailChimp Newsletter List (API v3). Everytime I remove the type: POST from the function it attempts to post the data via GET and it sends the data properly (ok response in MailChimp API dashboard). When testing this in the browser (FF) I get a .part file with "true" response.

   $(function(){
     $("a#test").click(function(e){
       e.preventDefault()  
       data = {
         "apikey" : "667378947", 
         "id" : "90298590285", 
         "email_address" : "test@getmoxied.net", 
         "output" : "json"
       }

  $.ajax({ 
    type: "POST",
    url: 'http://us2.api.mailchimp.com/1.3/?method=listSubscribe',
    data: data,
    success: function(data){
      alert(data);
    },
    error: function(){
      alert("err");
    }
  })       
 });
});

Im pulling my hair out on this one, any insight is greatly appreciated.

Thanks in advance,

JN

You shouldn't use the method in your question - you are exposing your MailChimp API key to anyone that knows how to view the source of a web page. You should only use it with server-side code. With this exposure, anyone could theoretically subscribe members to your list, delete it, etc. — adamdehaven, Dec 07 '12 at 00:01

score 14 · Answer 1 · answered May 04 '13 at 02:08

There is an undocumented endpoint that uses JSONP to do cross-domain ajax requests.

Just change 'post?' to 'post-json?' and add '&c=?' to the end of the standard url to get the JSONP endpoint. This doesn't requires the API key to be exposed on the client-side, or the creation of a server-side view.

I wrote a jQuery plugin that uses this method, if that's useful at all

https://github.com/scdoshi/jquery-ajaxchimp

score 9 · Accepted Answer · answered Mar 04 '11 at 16:34

The main issue is what jc commented on your original post - this simply won't work due to Same Origin Policy issues. Firebug is not as vocal about why the GET call fails, but that's why it returns no data. If you watch that with the POST, you'll see Firefox doesn't even make the call. Chrome's js console on the other hand straight explains the Same Origin policy to you.

All in all, this is a very good thing if for no other reason than it prevents you from publicly publishing your account's API Key, which is a very bad thing to do. If the reason why doesn't immediately sink in, go read through the large number of methods available in the API and then realize that all you need to access them is that API Key.

The correct way to do this is to POST data back to your server, then make the request from there. There are several fully built PHP examples (one using jquery, even), here.

Thank you for the detailed explanation. I realized after the fact that this was the very reason I had an issue with something similar in the past. Thanks again! — jeffreynolte, Mar 04 '11 at 19:32

score -2 · Answer 3 · answered Mar 04 '11 at 00:46

-2

e.preventDefault();
data = {
  "apikey" : "667378947", 
  "id" : "90298590285", 
  "email_address" : "test@getmoxied.net", 
  "output" : "json"
};

Could be? Semicolon is important. Hehe

answered Mar 04 '11 at 00:46

Joseadrian

4,234
2
16
7

Maybe you need to use GET parameters instead of POST parameters. – Joseadrian Mar 04 '11 at 00:53
But... you could use GET (in the example says that) http://apidocs.mailchimp.com/how-to/#ex1 I dont know :( jaja – Joseadrian Mar 04 '11 at 01:03

jQuery Ajax POST not working with MailChimp

3 Answers3

Linked