angular - 使用 angular2 的 Mailchimp 注册表单

<分区>

我正在尝试将 mailchimp 注册表单嵌入到我的 angular2 应用程序中。

http://kb.mailchimp.com/lists/signup-forms/add-a-signup-form-to-your-website

我一直在对 mailchimp 服务器进行 http post 调用。我在这里引用了 angular2 指南:https://angular.io/docs/ts/latest/guide/server-communication.html

这是我在 data.service 中的代码。

private mailChimpUrl = 'http://us14.list-manage.com/subscribe/post?u=xxxxxxxxxxxxxxxxxx&amp;id=xxxxxxxxxxxxxxxxx';


 addSubscriber(): Observable<string> {
        let body = JSON.stringify( { "EMAIL" : "abcdefg@hijk.com" } );
        let headers = new Headers({'Content-Type': 'application/json'});
        let options = new RequestOptions({headers: headers});

        return this.http.post(this.mailChimpUrl, body, options)
            .map(this.extractData)
            .catch(this.handleError);
    }

我知道浏览器会因为 CORS 而抛出错误。我尝试使用 chrome 扩展插件来尝试测试 http 调用是否正常。它会引发此错误。

XMLHttpRequest cannot load http://us14.list-manage.com/subscribe/post?u=xxxxxxxxxxxxxxxxxx&amp;id=xxxxxxxxxxxxxxxxx. Response for preflight has invalid HTTP status code 501

不确定我是否做错了。问题是无论如何我可以在不创建对 mailchimp 服务器的服务器端调用的情况下使其工作吗？谢谢。

最佳答案

您应该能够通过 jsonp 请求完成此操作:

import {Component} from '@angular/core';
import {Jsonp} from '@angular/http';

@Component({
    selector: 'my-app',
    template: `
      <div>
        Result: {{result | json}}
      </div>
    `
})
export class AppComponent {
  constructor(jsonp:Jsonp) {
    var url = 'https://mysubscriptionlist.us10.list-manage.com/subscribe/post-json?u=b0c935d6f51c1f7aaf1edd8ff&id=9d740459d3&subscribe=Subscribe&EMAIL=templth@yahoo.fr&c=JSONP_CALLBACK';
    jsonp.request(url, { method: 'Get' })
         .subscribe((res) => { this.result = res.json() });

  }
}

Working Plnkr using an older version of ng2

请求应该在组件的构造函数(例如服务)之外的其他地方发出，但为了一个快速而肮脏的例子。

注意:这是未经测试的代码转换from an example using an older version of Angular 2 ，但这个概念应该仍然有效。

关于angular - 使用 angular2 的 Mailchimp 注册表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39542975/

上一篇：Angular 2 路由器辅助路由不适用于 redirectTo

下一篇：angular - 如何将 Protractor 与 angular-2 表单控件一起使用？

相关文章：

asp.net - 使用 ASP.NET 为用户订阅 MailChimp

mailchimp-api-v3.0 - Mailchimp API : retrieving poll results

mailchimp - 在 Mailchimp API 3.0 中添加自定义合并标签

angular - 如何对组件进行单元测试以检查特定组件是否呈现

html - 链接在 gmail 中显示为蓝色

未调用 Angular 2 ngOnInit

html - Mailchimp - 限制 outlook 中的图像尺寸

Angular 2 : [ngClass] update condition in the function

angular - 拖动以在页面周围移动组件？