Mailchimp 使用 jQuery AJAX 订阅?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/21526408/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 01:36:55  来源:igfitidea点击:

Mailchimp subscribe using jQuery AJAX?

jqueryajaxmailchimpsubscribe

提问by Nagra

What is a complete jQuery solution to subscribing uses to a list on Mailchimp?

订阅 Mailchimp 列表的完整 jQuery 解决方案是什么?

The problem is that most solutions either use a library or require server side code. I want a quick elegant solution, which gives me complete control over the UI, hence UX of the form and it's functionality.

问题是大多数解决方案要么使用库,要么需要服务器端代码。我想要一个快速优雅的解决方案,它让我可以完全控制 UI,从而控制表单的 UX 及其功能。

回答by nneko

@Nagra's solution is good but it will throw an error when executed from the client's browser due to the Same-Origin Security Policiesin effect. In essence, these security measures are there to prevent cross site requeststhat occur when the originator and the sender are on different domains.

@Nagra 的解决方案很好,但由于有效的同源安全策略,从客户端浏览器执行时会抛出错误。本质上,这些安全措施是为了防止当发起者和发送者位于不同域时发生跨站点请求

If you see errors like the below in the javascript console it is a clear indication.

如果您在 javascript 控制台中看到如下所示的错误,这是一个明确的迹象。

XMLHttpRequest cannot load http://YOUR-MAILCHIMP-URL. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin http://BROWSER-LOCATIONis therefore not allowed access.

XMLHttpRequest cannot load http://YOUR-MAILCHIMP-URL. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin http://BROWSER-LOCATIONis therefore not allowed access.

To overcome this problem the script needs to be rewritten to utilize CORS or JSONP. As the MailChimp API does not support CORS the only option is the undocumented JSONP interface.

为了克服这个问题,需要重写脚本以使用 CORS 或 JSONP。由于 MailChimp API 不支持 CORS,唯一的选择是未记录的 JSONP 接口。

Change the URL to utilize the /subscribe/post-json?version and also append &c=?to the end. Once the URL is updated you will also need to modify the dataTypein the JSON hash to be jsonp

更改 URL 以使用 /subscribe/post-json? 版本并附加 &c=? 到最后。更新 URL 后,您还需要将 JSON 哈希中的dataType修改为jsonp

The updated first few lines of the function should resemble the below.

更新后的函数的前几行应类似于以下内容。

$.ajax({
    url: '//YOUR URL&id=YOUR LIST ID&c=?',
    data: $('#YOUR FORM').serialize(),
    dataType: 'jsonp',

回答by Nagra

  1. Obtain the URL for the list by selecting the List > Sign Up forms > (Classic form). You will find it on the 'Copy/paste onto your site' textareaand it will most likely begin with your username.

    $('#your-form').submit(function (e) {
        e.preventDefault();
    
        $.ajax({
            url: 'YOUR URL',
            type: 'GET',
            data: $('#your-form').serialize(),
            dataType: 'jsonp',
            contentType: "application/json; charset=utf-8",
            success: function (data) {
               if (data['result'] != "success") {
                    //ERROR
                    console.log(data['msg']);
               } else {
                    //SUCCESS - Do what you like here
               }
            }
        });
    });
    
  1. 通过选择列表 > 注册表单 >(经典表单)获取列表的 URL 。您可以在“复制/粘贴到您的网站”文本区域中找到它,并且很可能以您的用户名开头。

    $('#your-form').submit(function (e) {
        e.preventDefault();
    
        $.ajax({
            url: 'YOUR URL',
            type: 'GET',
            data: $('#your-form').serialize(),
            dataType: 'jsonp',
            contentType: "application/json; charset=utf-8",
            success: function (data) {
               if (data['result'] != "success") {
                    //ERROR
                    console.log(data['msg']);
               } else {
                    //SUCCESS - Do what you like here
               }
            }
        });
    });