我需要通过一个组件后做一个http请求到一个邮件黑猩猩订阅列表 [英] I need to do a http request to a mail chimp subscription list via a component post
问题描述
我需要通过一个组件后做一个http请求到一个邮件黑猩猩订阅列表
我读过的邮件黑猩猩文档和无法找到这个东西。
我也试过他们的邮件黑猩猩嵌入形式角2 HTML5的看法,但对于一些奇怪的原因,这并不工作。
I've read the mail chimp documentation and couldnt find anything on this. I also tried their mail chimp embedded form in an angular 2 html5 view but that doesnt work for some weird reason.
所以,我要的结果做一个HTTP请求到订阅列表,而不是和我有麻烦的工作。
So I've resulted to doing a http request to the subscribe list instead and I'm having trouble getting that working.
我使用的是打字稿,angular2和邮件黑猩猩
I'm using typescript, angular2 and mail chimp
这是我的code迄今:
subscribe = () => {
var url = "https://mysubscriptionlist.us10.list-manage.com/subscribe/post?u=b0c935d6f51c1f7aaf1edd8ff&id=9d740459d3&subscribe=Subscribe&EMAIL=" + this.email;
this.jsonp.request(url).subscribe(response => {
console.log(response);
});
}
这是我目前的控制台日志错误中铬:
未捕获的SyntaxError:意外的令牌LT;
Uncaught SyntaxError: Unexpected token <
推荐答案
我终于找到了如何解决您的问题。您需要使用JSONP支持Angular2的。
I finally found out how to fix your issue. You need to use the Jsonp support of Angular2.
您的地址支持JSONP通过增加一个 C
查询参数您的网址和开关 https://mysubscriptionlist.us10.list-manage.com /订阅/后
按 https://mysubscriptionlist.us10.list-manage.com/subscribe/post-json
。你需要把 JSONP_CALLBACK
值(见这个问题:的 https://github.com/angular/angular/issues/5613 )。
Your address supports Jsonp by adding a c
query parameter to your URL and switching https://mysubscriptionlist.us10.list-manage.com/subscribe/post
by https://mysubscriptionlist.us10.list-manage.com/subscribe/post-json
. You need to put the JSONP_CALLBACK
value in it (see this issue: https://github.com/angular/angular/issues/5613).
在这种情况下,您将有以下响应负载:
In this case, you will have the following response payload:
JSONP_CALLBACK (
{
"result": "success",
"msg": "Almost finished... We need to confirm your email address. To complete the subscription process, please click the link in the email we just sent you."
}
)
调用引导
功能时,其注册JSONP_PROVIDERS后:
After having registered JSONP_PROVIDERS when calling the bootstrap
function:
import {bootstrap} from 'angular2/platform/browser'
import {JSONP_PROVIDERS} from 'angular2/http'
import {AppComponent} from './app.component'
bootstrap(AppComponent, [ JSONP_PROVIDERS ]);
您可以然后使用您的构造函数注入 JSONP
类的一个实例执行您的要求:
You can then execute your request using an instance of the Jsonp
class you injected from constructor:
import {Component} from 'angular2/core';
import {Jsonp} from 'angular2/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=(...)&subscribe=Subscribe&EMAIL=my@email.com&c=JSONP_CALLBACK';
jsonp.request(url, { method: 'Get' })
.subscribe((res) => {
this.result = res.json()
});
}
}
请参阅此plunkr的工作示例: http://plnkr.co/edit / dqreqBL6kyNkR8Z2wgGR?p = preVIEW
See this plunkr for a working sample: http://plnkr.co/edit/dqreqBL6kyNkR8Z2wgGR?p=preview
这篇关于我需要通过一个组件后做一个http请求到一个邮件黑猩猩订阅列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!