トッカンソフトウェア

Angular 2 Ajax

今回はHttpクライアントを使用してAjax通信を行ってみます。

入力項目で作成したものをベースにするので、まずは入力項目分を作成し、 その後に今回分を追加、上書きを行って下さい。


またサーバ側はPHPでテストプログラムを作成しました。環境がなければこちらを参考に環境構築して下さい。

jQueryでも同じようなソースを書いてみました。こちらこちらを参照下さい。


クライアント側ソースファイル

app\app.module.ts

				
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { HttpModule } from '@angular/http';

@NgModule({
    imports: [
        BrowserModule,
        HttpModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }


			

app\app.component.ts

				
import { Component } from '@angular/core';
import { Http, Response, RequestOptions, Headers } from '@angular/http';
import 'rxjs/Rx';
import {Observable} from 'rxjs/Observable';
import {Observer} from 'rxjs/Observer';
import 'rxjs/add/operator/share';
import 'rxjs/add/operator/map';

@Component({
    selector: 'my-app',
    template:
    `<input #hello placeholder="ここに何か入力して下さい。" />
        <button (click)="update(hello.value)">表示</button>
        <h1>{{message}}</h1>`
})
export class AppComponent {
    message = "ここに表示されます。";

    constructor(private http: Http) { }

    private extractData(res: Response) {
        let body = res.json();
        return body;
    }

    private handleError(error: Response | any) {
        // In a real world app, we might use a remote logging infrastructure
        alert("err:" + error);
        let errMsg: string;
        if (error instanceof Response) {
            const body = error.json() || '';
            const err = body.error || JSON.stringify(body);
            errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
        } else {
            errMsg = error.message ? error.message : error.toString();
        }
        console.error(errMsg);
        return Observable.throw(errMsg);
    }

    private show(res: any) {
        if (res.ret) {
            this.message = "OK:" + res.str;
        } else {
            this.message = "NG:" + res.str;
        }
    }

    update(value: string) {
        let arg = { str1: value };
        this.message = value;

        this.http.post('http://localhost/ajax3.php'
            , JSON.stringify(arg)
            , new RequestOptions(
                {
                    headers: new Headers(
                        { 'Content-Type': 'application/json' })
                }))
            .map(this.extractData)
            .catch(this.handleError)
            .subscribe(jsonObj => this.show(jsonObj),
            error => this.message = <any>error);
    }
}


			

サーバ側ソースファイル

ajax3.php

別途、Webサーバを立てて下さい。
				
<?php

class Cls {
	var $ret;
	var $str;
}

$obj = new Cls();

//送信データを取得
$json = file_get_contents("php://input");

//JSONから連想配列に変換
$data = json_decode($json, true);

if (count($data) == 0 || !isset($data['str1'])) {

	$obj -> str = "引数str1が指定されていません。引数の数:" . count($data);
	$obj -> ret = "false";

} else if(strlen($data['str1']) == 0) {

	$obj -> str = "引数str1が指定されましたが文字が入力されていません。引数の数:" . count($data);
	$obj -> ret = "false";

} else {

	$obj -> str = $data['str1'] . "<BR />" . $_SERVER['REQUEST_METHOD'] . "で送信されました";
	$obj -> ret = "true";
	
}

//連想配列からJSONに変換
$result = json_encode($obj, JSON_UNESCAPED_UNICODE);

//処理結果を戻す(出力)
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Content-Type');
echo $result;
?>


			


実行イメージ






ページのトップへ戻る
ェア All Rights Reserved.