使用 Javascript AJAX(不是 jQuery)提交嵌入式 Mailchimp 表单

Posted

技术标签:

【中文标题】使用 Javascript AJAX(不是 jQuery)提交嵌入式 Mailchimp 表单【英文标题】:Submit Embedded Mailchimp Form with Javascript AJAX (not jQuery) 【发布时间】:2015-05-08 14:35:18 【问题描述】:

我一直在尝试使用 AJAX 但不使用 jQuery 提交嵌入式 Mailchimp 表单。显然,我没有正确地这样做,因为我一直以“来吧,华生,来吧!比赛正在进行中”结束。页面:(

对此的任何帮助将非常感谢。

form action 已更改为将post?u= 替换为post-json?u=,并且&c=? 已添加到操作字符串的末尾。这是我的js:

document.addEventListener('DOMContentLoaded', function() 

    function formMailchimp() 

        var elForm         = document.getElementById('mc-embedded-subscribe-form'),
            elInputName    = document.getElementById('mce-NAME'),
            elInputEmail   = document.getElementById('mce-EMAIL'),
            strFormAction  = elForm.getAttribute('action');

        elForm.addEventListener('submit', function(e) 

            var request = new XMLHttpRequest();

            request.open('GET', strFormAction, true);
            request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');

            request.onload = function() 

                if (request.status >= 200 && request.status < 400) 

                    // Success!
                    var resp = JSON.parse(request.responseText);

                    request.send(resp);

                 else 

                    console.log('We reached our target server, but it returned an error');

                

            ;

            request.onerror = function() 
                console.log('There was a connection error of some sort');
            ;

        );

    

    formMailchimp();

);

另外,我预计不可避免的“你为什么不只使用 jQuery”评论。在不深入这个项目的细节的情况下,我无法将 jQuery 引入代码中。对不起,但这必须是香草 javascript。兼容性仅适用于非常现代的浏览器。

非常感谢您提供的任何帮助!

【问题讨论】:

【参考方案1】:

几天前,我遇到了完全相同的问题,事实证明,关于原生 JavaScriptMailChimp 文档非常少。我可以与您分享我想出的代码。希望你能从这里开始建设!

简化的 html 表单:我从 MailChimp 表单构建器中获得了 from 操作并添加了“post-json”

<div id="newsletter">
    <form action="NAME.us1.list-manage.com/subscribe/post-json?u=XXXXXX&amp;id=XXXXXXX">
        <input class="email" type="email" value="Enter your email" required />
        <input class="submit" type="submit" value="Subscribe" />
    </form>
</div>

JavaScript:避免跨域问题的唯一方法是创建一个脚本并将其附加到标题中。然后在“c”参数上发生回调。 (请注意,目前还没有电子邮件地址验证)

function newsletterSubmitted(event) 
    event.preventDefault();

    this._form = this.querySelector("form");
    this._action = this._form.getAttribute("action");
    this._input = this._form.querySelector("input.email").value;

    document.MC_callback = function(response) 

        if(response.result == "success") 
            // show success meassage

         else 
            // show error message

        
    

    // generate script
    this._script = document.createElement("script");
    this._script.type = "text/javascript";
    this._script.src = this._action + "&c=document.MC_callback&EMAIL=" + this._input;

    // append script to head    
    document.getElementsByTagName("head")[0].appendChild(this._script);


var newsletter = document.querySelector("#newsletter")
newsletter.addEventListener("submit", newsletterSubmitted);

【讨论】:

嘿@Hanslibuzli !我终于开始尝试您的代码,但我在控制台中收到此错误:[ JSON.parse:JSON 数据的第 1 行第 1 列的数据意外结束] ...指向这一行:[ var ChimpResponse = JSON.parse(this.response); ] 有趣的是,我最终确实收到了一封来自 Mailchimp 的确认电子邮件。知道如何解决这个问题吗?谢谢! 嗨@beefchimi 我刚刚更新了我的原始答案 - 希望这会有所帮助! 我正在尝试这个,我知道已经有几年了...... POST 不起作用。这是我在 vanilla js ajax 提交上找到的唯一帮助。我收到错误Loading failed for the &lt;script&gt; with source “http://localhost/NAME.us1.list-manage.com/subscribe/post-jso…8a3&amp;id=removed&amp;c=document.MC_callback&amp;EMAIL=test@test.com”. @Matt - 我希望你解决了这个问题。您需要将 html 代码更改为 &lt;form action = "https://ACCOUNTNAME.us11....etc 这将阻止 localhost 被前置。 ACCOUNTNAME 是您的 mailchimp 帐户的名称。

以上是关于使用 Javascript AJAX(不是 jQuery)提交嵌入式 Mailchimp 表单的主要内容,如果未能解决你的问题,请参考以下文章

在 Javascript/ajax 或 jquery 中提交多个表单

使用 jquery、javascript 或 PHP 生成查询字符串

jQuery使用ajax跨域请求获取数据

HTTP 错误 405.0 - 不允许使用 Jquery ajax get 的方法

从Google CDN加载jQuery&jqueryui

jQuery礼包|快速简洁的JavaScript框架