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

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

以前、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
        );
}
五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。 また、Udemyのプログラミング解説の講師、writer.appの自主開発や上越TechMeetupの主催などを行っています。

プロフィール

©Copyright 2022 Yohei Isokawa All Rights Reserved.