こんにちは。
今日は、Webシステムを作る為の事前調査を下記の構成で実施しました。
■目的
AngularJS（HTML,JavaScript）で記載されたリクエストに対して、PHP（サーバサイド）からレスポンスを返却し
HTMLに表示させる。
データはJSON形式を用いる。
■環境
XAMPP
■利用言語
サーバ
PHP(Ver7.x系)
クライアント
HTML5
AngularJS(1.6系）
1.環境設定
XAMPPをインストール
Apacheのポート切替（利用ポートがSkypeと重複していた為）
Atom Live Server(HTML動作確認用）のインストール
2.コーディング
・index.html
<html ng-app="myApp">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<!-- vendor -->
<script src="./js/vendor/angular.js"></script>
<!-- original -->
<script src="./js/controller/index.js"></script>
<title>test</title>
</head>
<body ng-controller="IndexController">
<!-- page start -->
データ：{{data}}<br>
名前：{{name}}<br>
性別：{{gender}}<br>
趣味：{{shumi}}<br>
特技：{{tokugi}}<br>
</body>
</html>
・index.js
var app = angular.module('myApp',[]);
app.controller('IndexController',['$scope','$rootScope','$http',function($scope,$rootScope,$http){
$rootScope.serverUrl='http://localhost:8081/blg_server/blg_server.php/';
// http post start
$http.post($rootScope.serverUrl + 'test1'
// ,{headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}}
)
.then(function onSuccess(response){
var data = angular.fromJson(response);
console.table(response);
$scope.data = response;
$scope.name = data.data.name;
$scope.gender = data.data.gender;
$scope.shumi = data.data.detail.shumi;
$scope.tokugi = data.data.detail.tokugi;
});
}]);
・サーバのphpファイル
<?php
// CROSS ORIGIN
if (array_key_exists('HTTP_ORIGIN', $_SERVER)) {
$http_origin = $_SERVER['HTTP_ORIGIN'];
}
else if (array_key_exists('HTTP_REFERER', $_SERVER)) {
$http_origin = $_SERVER['HTTP_REFERER'];
} else {
$http_origin = $_SERVER['REMOTE_ADDR'];
}
header("Access-Control-Allow-Origin: $http_origin");
// dispatch start
// params parse
$params = array();
if('' != $_SERVER['REQUEST_URI']){
$params = explode('/', $_SERVER['REQUEST_URI']);
}
// param get
$controller='index';
if(0<count($params)){
$controller = $params[3];
}
// dispatch exec
switch ($controller) {
case 'index':
echo 'とっぷ';
break;
case 'test1':
$arr = array(
'name'=>'太郎',
'gender'=>'男',
'detail'=>array(
'shumi'=>'釣り',
'tokugi'=>'野球',
),
);
$json = json_encode($arr
, JSON_PRETTY_PRINT|JSON_UNESCAPED_UNICODE|JSON_UNESCAPED_SLASHES
);
echo $json;
break;
case 'test2':
echo 'テスト2';
default:
echo 'その他だよ';
break;
}
?>
3.配置
C:\xampp\htdocs
（phpMyAdminのデフォルトのディレクトリがここらしい）にphpファイルを配置
4.Apacheサーバ起動
5.動作確認
/(phpファイル)/test1を直接叩いた時のレスポンス
■localhost:(設定したポート番号)/(phpファイル)/test1をブラウザで叩く
{ "name": "太郎", "gender": "男", "detail": { "shumi": "釣り", "tokugi": "野球" } }
HTMLファイル上の動作確認
■localhost:(Atom Live Serverで起動したポート番号)/index.html
データ：{"data":{"name":"太郎","gender":"男","detail":{"shumi":"釣り","tokugi":"野球"}},"status":200,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"http://localhost:8081/blg_server/blg_server.php/test1","headers":{"Accept":"application/json, text/plain, /"}},"statusText":"OK","xhrStatus":"complete"}
名前：太郎
性別：男
趣味：釣り
特技：野球
以上の流れで、AngularJS上からPOST通信でリクエストを送り、とりあえずPHP上からレスポンスを返却することが出来ました。