如何根据使用Angular2发出的post请求的响应来呈现输出

How to render output according to response of post request made using Angular2

本文关键字：请求 post 响应 输出 何根 Angular2      更新时间：2023-09-26

目前我有一个用于登录的弹出窗口，因此当用户输入电子邮件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')
                );

我希望这能帮助

相关文章：