Jump to the content

Angular2でAjaxを使ってサーバーにデータを送信する

Angular2

    以前、Ajaxでのデータ取得を紹介しましたが、 データの取得だけではなく、送信もしたいですよね。

    今回はAngular2でのAjaxでデータを送信する方法を紹介します。

    データを送信するのはpostメソッド

    今回は、サーバーにJSONを送信して、結果を返してもらう、検索機能を実装する例を紹介します。

    データを取得するにはHttpクライアントの get メソッドを使いましたが、 送信するには post メソッドを使います。

    http.post(url, body, options)

    • url : 送信するURL
    • body : 送信するデータ
    • options : 送信オプション

    post メソッドではデータを送るので、メソッドの引数が複数必要になる点に注意してください。

    今回は、JSONを送信するので、送信ヘッダ を Content-Type: application/json に指定します。 この指定はoptionsで指定します。

    送信するJSONデータは次のとおりです。

    { "keyword": "検索キーワード" }
    

    ではさっそく具体的な実装方法を見ていきましょう。

    実装方法

    データ取得の記事で紹介した、hero.service.ts に追記していきます。

    まず、送信ヘッダを指定するためにクラスをimportします。 Headers は送信ヘッダ生成、RequestOptions は送信オプション生成のためのクラスです。

    import { Headers, RequestOptions } from '@angular/http';
    

    次にデータ送信するメソッドを追加します。

    search(keyword: string): Observable<Hero> {
        let body = JSON.stringify({ keyword });
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });
    
        return this.http.post('/api/path/to', body, options)
            .map(this.extractData)
            .catch(this.handleError);
    }
    

    送信するデータは JSON.stringify() でJSONオブジェクトに変換しています。 送信ヘッダを Content-Type: application/json とし、リクエストオプションに指定します。

    このサーバーからのレスポンスを受けるには、データ取得と同じくコンポーネント側で subscribe メソッド内でアクセスできます。

    hero-list.component.ts

    searchHeroes() {
        this.heroService.search(keyword)
            .subscribe(
                result => this.result = result,
                error =>  this.errorMessage = <any>error
            );
    }
    

    注目記事

    最近の記事

    ぼくが書いてます

    フロントエンドエンジニア

    イソップ

    ページの先頭に戻る

    Search results

    ×