以前、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
);
}
