Angular から PHP に JSON データを Post する

Angular から PHP に JSON データを Post する時に、PHP 側で $_POST で受け取る処理を検索したら自分の記事がヒットしたけど、お前 POST 処理しているけど何も値送信してねーじゃねーか、となったのでメモ。単純に $_POST では受け取れないのでちょっと一手間必要。


ポイント


  • HttpHeaders の Content-Type を application/x-www-form-urlencoded

  • 送信データをまるっと1つの変数に入れる

  • PHP で受け取った値を json_decode する


ソース


GlobalService(global.service.ts) 作成

Service として作成しなくても良いけど使い勝手良いので作成。ポイントは HttpHeaders 値。

import { Injectable }                   from '@angular/core';

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { timeout, catchError} from 'rxjs/operators';
import { Observable, throwError} from 'rxjs';

const HTTP_OPTIONS = {
headers: new HttpHeaders({
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
})
};

@Injectable({
providedIn: 'root'
})

export class GlobalService {

/**
* コンストラクタ
* @param {Router} _router
*/

constructor(
private _http: HttpClient
) { }

/**
* httpポスト処理
* @param {string} _postUrl - 送信URL
* @param {any} _trans_data - 送信データ(デフォルト空)
* @return {Observable<any>} http.post処理のレスポンス
*/

public http(_postUrl: string, _trans_data: any = ''): Observable<any> {
let ret: Observable<any>;
let postUrl: string;
postUrl = _postUrl;
ret = this._http.post(postUrl, _trans_data, HTTP_OPTIONS)
.pipe(
timeout(5000),
catchError(this.handleError())
);
return ret;
}

/**
* Observable のエラーを返却します
* @param 無し
* @return {Observable<any>}
*/

private handleError(): any {
return (error: any): Observable<any> => {
const ret = {
'status': error.status
, 'data': error.statusText + '/' + error.url
};
return throwError(ret);
};
}

}


TopComponent(top.component.ts) 作成

POST 処理を行うページ。ポスト処理は画面ボタンのクリックにて行う想定。ポイントは送信 JSON 値を1つの変数に入れて送るところ。

import { Component, OnInit }      from '@angular/core';

import { GlobalService } from '../../services/global.service';

@Component({
selector: 'app-top',
templateUrl: './top.component.html',
styleUrls: ['./top.component.scss']
})

export class TopComponent implements OnInit {

/**
* コンストラクタ
* @param {GlobalService} globalService
*/

constructor(
public gs: GlobalService
) {}

ngOnInit() {}

// クリック処理で POST 処理実施
public clickTest() {
let temp;
temp = {
'test': 'テストデータ'
};

const body = 'data=' + JSON.stringify(temp); // <- 送信 JSON 値を data 変数に入れて送る

this.gs.http('/test.php', body).subscribe(
res => {
console.log('success: ' + JSON.stringify(res));
},
error => {
console.log('error: ' + JSON.stringify(error));
}
);
}

}


PHP 処理

受け取る PHP は以下の感じ。json_decode で連想配列として取り扱える。

<?

$post = json_decode($_POST['data'], true);

$retArray = array(
'rType'=> 'success'
, 'message'=> $post['test'] // <- 送信されてきた「テストデータ」という文字列がこれで取得出来る
);

header('Content-type: application/json');
echo json_encode($retArray, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);

以上で作業一式。


参考

Post JSON from angular 2 to php