本文介绍了我需要通过组件帖子向邮件黑猩猩订阅列表发出 http 请求的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我需要通过组件帖子向邮件黑猩猩订阅列表发出 http 请求
我已经阅读了邮件黑猩猩文档,但没有找到任何相关信息.我还在 angular 2 html5 视图中尝试了他们的邮件黑猩猩嵌入表单,但由于某些奇怪的原因而不起作用.
因此,我改为向订阅列表发出 http 请求,但无法正常工作.
我正在使用 typescript、angular2 和 mail chimp
这是我目前的代码:
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 => {控制台日志(响应);});}
这是我当前在 chrome 中的控制台日志错误:
Uncaught SyntaxError: Unexpected token <
解决方案
我终于找到了如何解决您的问题.需要使用Angular2的Jsonp支持.
您的地址通过将 c
查询参数添加到您的 URL 并切换 https://mysubscriptionlist.us10.list-manage.com/subscribe/post
来支持 Jsonphttps://mysubscriptionlist.us10.list-manage.com/subscribe/post-json
.您需要将 JSONP_CALLBACK
值放入其中(请参阅此问题:https://github.com/angular/angular/issues/5613).
在这种情况下,您将拥有以下响应负载:
JSONP_CALLBACK ({"result": "成功","msg": "差不多完成了...我们需要确认您的电子邮件地址.要完成订阅过程,请点击我们刚刚发送给您的电子邮件中的链接."})
在调用bootstrap
函数时注册JSONP_PROVIDERS后:
从'angular2/platform/browser'导入{bootstrap}从angular2/http"导入 {JSONP_PROVIDERS}从 './app.component' 导入 {AppComponent}引导程序(AppComponent,[JSONP_PROVIDERS]);
然后,您可以使用从构造函数注入的 Jsonp
类的实例来执行您的请求:
import {Component} from 'angular2/core';从'angular2/http'导入{Jsonp};@成分({选择器:'我的应用',模板:`<div>结果:{{结果 |json}}
`})导出类 AppComponent {构造函数(jsonp:Jsonp){var url = 'https://mysubscriptionlist.us10.list-manage.com/subscribe/post-json?u=(...)&subscribe=Subscribe&[email protected]&c=JSONP_CALLBACK';jsonp.request(url, { method: 'Get' }).subscribe((res) => {this.result = res.json()});}}
查看此 plunkr 以获取工作示例:http://plnkr.co/edit/dqreqBL6kyNkR8Z2wgGR?p=预览
I need to do a http request to a mail chimp subscription list via a component post
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.
So I've resulted to doing a http request to the subscribe list instead and I'm having trouble getting that working.
I'm using typescript, angular2 and mail chimp
This is my code so far:
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);
});
}
This is my current console log error in chrome:
Uncaught SyntaxError: Unexpected token <
解决方案
I finally found out how to fix your issue. You need to use the Jsonp support of Angular2.
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."
}
)
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 ]);
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 protected]&c=JSONP_CALLBACK';
jsonp.request(url, { method: 'Get' })
.subscribe((res) => {
this.result = res.json()
});
}
}
See this plunkr for a working sample: http://plnkr.co/edit/dqreqBL6kyNkR8Z2wgGR?p=preview
这篇关于我需要通过组件帖子向邮件黑猩猩订阅列表发出 http 请求的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!