目前我有一个用于登录的弹出窗口,因此当用户输入电子邮件id和密码并进行服务器调用时。我该如何根据收到的回复做出反应。早些时候,当我使用javascript时,我按照以下方式进行:
submitHandler: function(form) {
$('.signin_form').attr('disabled','disabled')
var data = {}
$(form).serializeArray().map(function(x){data[x.name] = x.value;});
helperMethods.ajaxHandler(accounts_url+'login_user/','POST',
data,authHelpers.afterLogin)
}
在这样做的时候,这被称为:
var authHelpers = {
afterLogin : function(response){
$('.signin_form').removeAttr('disabled')
if(response.message!=undefined){
if(typeof response.message.validation!='undefined'
&& response.message.validation.indexOf('verifi')!='-1'){
$('.error_display').html('<div>Error</div>')
}else{
$('.error_display').text(response.message.validation)
}
$('input[name="password"]').val('')
return;
}
if(response.token!=''){
localStorage.setItem('jwt_token',response.token)
window.location.reload()
}
}
}
如何使用angular2和Typescript实现相同的功能?
谢谢。
您需要使用Angular2 http
客户端来发出POST请求,并使用Observable
subscribe
方法来详细说明响应。
这里是一个服务类发出POST命令的例子
import {Injectable} from 'angular2/core';
import {Http, Headers, RequestOptions, Response} from 'angular2/http';
import {Environment} from '../settings/environment.service';
import {BackEndService} from '../app/backEnd.service';
@Injectable()
export class BackEndRestService extends BackEndService {
constructor(private _http: Http, private _environment: Environment) {
super();
}
authorize(inAccessCode: string) {
let myUrl = this._environment.baseRestServicesUrl + 'authorize';
let options = this.getOpionsForPost();
let jsonString = JSON.stringify({_accessCode: inAccessCode});
return this._http.post(myUrl, jsonString, options)
.catch(this.handleError)
}
private handleError (error: Response) {
return Observable.throw(errorText || 'Server error');
}
private getOpionsForPost() {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
return new RequestOptions({headers: headers});
}
}
这是调用服务的代码
this._backEndService.authorize(this._user.accessCode)
.subscribe(
data => {
let retJson = data.json();
if (retJson.code == 'OK') { // do stuff
} else {
// manage the situation when the server responds KO
},
err => {
// manage errors;
},
() => console.log('Authorization Complete')
);
我希望这能帮助