Angular Ajax

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

Angular CLIの続きからやるので、環境がない場合、そちらを参考に環境構築してください。

またサーバ側はPHPでテストプログラムを作成しました。環境がなければこちらを参考に環境構築して下さい。
jQueryでも同じようなソースを書いてみました。こちらとこちらを参照下さい。

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

src\app\app.module.ts

HttpClientModuleを追加します。

				
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

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

src\app\app.component.ts

HttpClientでPOST通信をおこないます

	
				

import { Component } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

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

    constructor(private http: HttpClient) { }

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

    update(value: string) {

        let arg = { str1: value };

        let httpOptions = {
            headers: new HttpHeaders({ 'Content-Type': 'application/json' })
        };

        this.http.post('http://localhost/ajax3.php'
            , JSON.stringify(arg)
            , httpOptions)
            .subscribe(obj => this.show(obj),
                error => this.message = error.message);
    }
}

サーバ側ソースファイル

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(is_countable($data)?$data:[]) == 0 || !isset($data['str1']) || strlen($data['str1']) == 0) {

	$obj -> str = "引数が指定されていません。";
	$obj -> ret = "false";

} else {

	$obj -> str = $data['str1'] . " " . $_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;

実行イメージ

ページのトップへ戻る