AngularJS+PHP+PDO

1 篇文章 / 0 new

發表回應前，請先登入

週三, 2014-02-26 09:16

author

AngularJS+PHP+PDO

學習整體的運用框架, 利用前端選取資料表然後透過 ajax 傳送請求到後端取得該資料表資料清單後顯示內容
main.html

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>AngularJS+PHP+PDO</title>
        <script src="angular.js"></script>
        <script src="app.js"></script>
    </head>
    <body ng-app="AppTable">
        <div align="center" ng-controller="CtlTable">
            <H1>AngularJS + PHP + PDO</H1>
            <label>選取資料表:</label>
            <select ng-model="table">
                <option ng-repeat="table in tables" value='{{table.table_name}}'>{{table.table_name}}
            </select>
            <button type="submit" ng-click="getTableComtent()">讀取</button>
            <hr/>
            <table border="1" ng-show="contents.length">
                <tr ng-repeat="(key, value) in contents" ng-show="$first">
                    <th ng-repeat="values in value">{{values.COLUMN}}</th>
                </tr>
                <tr ng-repeat="(key, value) in contents" ng-show="!$first">
                    <td ng-repeat="values in value">{{values}}</td>
                </tr>
            </table>
        </div>
    </body>
</html>

app.js 處理請求部分

var myApp = angular.module('AppTable', []);
myApp.controller('CtlTable', ['$scope','$http', function($scope, $http) {
    $http.post('tablelist.php')
        .success(function(data, status) {
            $scope.status = status;
            $scope.data = data;
            $scope.tables = data;
        })
        .error(function(data, status) {
            $scope.data = data || "資料表請求失敗";
            $scope.status = status;
        });
    $scope.getTableComtent = function() {
        $http.post('tablecontent.php', {"data": $scope.table})
            .success(function(data, status) {
                $scope.status = status;
                $scope.data = data;
                $scope.contents = data;
            })
            .error(function(data, status) {
                $scope.data = data || "資料表內容請求失敗";
                $scope.status = status;
            });
    };
}]);

tablelist.php 取得資料表清單

include '../ConnectDB.php';
$conn = ConnectDB::getConnect();
$rs = $conn->query("SHOW TABLES FROM jquery");
$result = array();
while($row = $rs->fetch()) {
    $menu["table_name"] = $row['tables_in_jquery'];
    array_push($result,$menu);
}
echo json_encode($result);
ConnectDB::closeDB($conn);

tableContent.php 取得單一資料表內容

include '../ConnectDB.php';
//接收的資料是 angularjs 的 post json data
$data = file_get_contents("php://input");
$objData = json_decode($data);
$data = $objData->data;
 
$conn = ConnectDB::getConnect();
$rs = $conn->query("SHOW COLUMNS FROM $data" );
$result = array();
$fields = array();
$fields_array = array();
while ($row = $rs->fetch()) {
    array_push($result, $row["field"]);
    $fields["COLUMN"] = $row["field"];
    array_push($fields_array, $fields);
}
$content = array();
$table = array();
$query = 'select * from ' . $data;
$rs = $conn->query($query);
array_push($content, $fields_array);
while ($row = $rs->fetch()) {
    for ($i = 0; $i < count($result); $i++) {
        $fName = $result[$i];//strtoupper($result[$i]);//strtolower
        $table[$fName] = $row[$fName];
    }
    array_push($content, $table);
}
echo json_encode($content);
ConnectDB::closeDB($conn);