带angular2的Mailchimp注册表单 [英] Mailchimp signup form with angular2
问题描述
我正在尝试将mailchimp注册表单嵌入到我的angular2应用程序中.
I am trying to embed a mailchimp sign up form to my angular2 application.
http://kb.mailchimp.com/lists/signup-forms/add-a-signup-form-to-your-site
我一直坚持对mailchimp服务器进行http发布呼叫.我在这里引用angular2指南: https://angular.io/docs/ts/latest/guide/server-communication.html
I am stuck at doing a http post call to mailchimp server. I am referencing the angular2 guide here: https://angular.io/docs/ts/latest/guide/server-communication.html
这是我在data.service中的代码.
This is my code in the data.service.
private mailChimpUrl = 'http://us14.list-manage.com/subscribe/post?u=xxxxxxxxxxxxxxxxxx&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调用是否正常.它会引发此错误.
I understand that browser will throw an error because of CORS. I have tried to use a chrome extension plugin to try and test if the http call is working. It throws this error.
XMLHttpRequest cannot load http://us14.list-manage.com/subscribe/post?u=xxxxxxxxxxxxxxxxxx&id=xxxxxxxxxxxxxxxxx. Response for preflight has invalid HTTP status code 501
不确定我做错了什么.问题仍然存在,我可以在不创建对mailchimp服务器的服务器端调用的情况下使其正常工作吗?谢谢.
Not sure if I am doing things wrongly. Question will be is there anyway I can make it work without creating a server side call to the mailchimp server? Thanks.
推荐答案
您应该能够通过jsonp请求来完成此操作:
You should be able to accomplish this with a jsonp request:
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() });
}
}
该请求应该在组件的构造函数(例如Service)之外的其他地方发出,但是为了快速而肮脏的示例起见.
The request should be made somewhere else other than the constructor of a component (eg. Service), but for a quick and dirty example's sake.
Note: This is untested code converted from an example using an older version of Angular 2, but the concept should still work.
这篇关于带angular2的Mailchimp注册表单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!