Mailchimp API V3 jQuery Ajax POST subscribers

问题

There has been a big update on the Mailchimp API (v3.0) and many of the jQuery plugins are out of date in order to POST subscribers on form.submit().

After reading v3.0 docs:

Managing subscribers suggests the following JSON object format:

{
   "email_address": "urist.mcvankab@freddiesjokes.com", 
   "status": "subscribed", 
   "merge_fields": {
      "FNAME": "Urist", 
      "LNAME": "McVankab"
   }
}

And the following root endpoint for the API lists resource:

https://<dc>.api.mailchimp.com/3.0/

So here's my form.submit() code with the jQuery Ajax POST request:

$(document).ready(function(){
    var mcForm = $('#mailchimpForm');
    var mailchimp = {};
    mailchimp.dc='us5';
    mailchimp.id='xxxxxxxx';
    var url = '//' + mailchimp.dc + '.api.mailchimp.com/3.0/lists/' + mailchimp.id + '/members/';

    function beginMailchimpPost(data){
        var params = JSON.stringify(data);
        $.ajax({
            url: url,
            method: 'POST',
            data: params,
            dataType: 'jsonp',
            contentType: 'application/json; charset=utf-8',
            error: function(res, text){
                console.log('Err', res);
            },
            success: function(res){
                console.log('Success', res);
            }
        });
    }
});

This is the JSON.stringify(data) object:

{"email_address":"email@mail.com","status":"subscribed","merge_fields":{"FNAME":"Name","LNAME":"Last name"}}

And I'm getting the following error:

GET http://... 401 (Unauthorized)
Err Object {readyState: 4, status: 404, statusText: "error"}

What could be wrong?

Here's the link to Mailchimp's API v3.0 docs (list members collection).

回答1:

Unfortunately it is not possible to make requests for the front-end Mailchimp API.

Note MailChimp does not support client-side implementation of our API using CORS requests due to the potential security risk of exposing account API keys.

https://developer.mailchimp.com/documentation/mailchimp/guides/get-started-with-mailchimp-api-3/#authentication

回答2:

The way I did it is to use your AJAX code but strip out all the MailChimp stuff and send the post data to a PHP file. I used this code:

https://github.com/actuallymentor/MailChimp-API-v3.0-PHP-cURL-example/blob/master/mc-API-connector.php

I just stripped out everything but the part I needed for subscribing a single user and it worked like a charm. For error reporting, you can probably detect for errors on the PHP side and send HTTP status to the AJAX.

回答3:

You're getting a 401 because you're not passing in your API key.

You'll need to add the following to you're ajax call:

beforeSend: function(xhr) { xhr.setRequestHeader("Authorization",
    "Basic " + btoa("api:" + mailchimp_api_key)); };

Where mailchimp_api_key is the key for your account. Take a look at http://kb.mailchimp.com/api/article/api-3-overview for more information on auth with the api.

回答4:

You need to add your API key in params, like this;

{
   "apikey": "your key here",
   "email_address": "urist.mcvankab@freddiesjokes.com", 
   "status": "subscribed", 
   "merge_fields": {
      "FNAME": "Urist", 
      "LNAME": "McVankab"
   }
}

Then you need to change datetype from "jsonp" to "json". "jsonp" is GET only and will not work with POST method.

And the last thing you need to do is to allow for cross domain scripting;

http://enable-cors.org/server.html

来源：https://stackoverflow.com/questions/32778133/mailchimp-api-v3-jquery-ajax-post-subscribers

标签

jquery

ajax

mailchimp

mailchimp-api-v3.0