保存后使用angular.js顯示來自mysql的數據

Question

我是angularJS的新手。 我嘗試使用PHP / MySQL和Angular JS保存和獲取數據並顯示到表中。 數據保存過程運行正常。 現在，我想在保存后獲取數據。

這是我的代碼標記：

Index.html

<!doctype html>
<html>
  <head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <style type="text/css">
        section{padding: 30px 0;}
    </style>
  </head>
  <body>
      <div class="container">
        <section>
        <div class="row">

          <!-- BEGIN SAVE RECORDS -->
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6" ng-app="AddUser">
            <form ng-controller="AppCtrl" name="add_user">
            <div class="panel panel-primary">
              <div class="panel-heading">
                <h3 class="panel-title">Send Invitation</h3>
              </div>
              <div class="panel-body">
                  <div class="form-group">
                    <input type="text" class="form-control" name="user_email" ng-model="user_name" placeholder="Enter a name">
                  </div>
                  <div class="form-group">
                    <input type="text" class="form-control" name="user_name" ng-model="user_email" placeholder="Enter an e-mail adress">
                  </div>
                </form>
              </div>
              <div class="panel-footer">
                <button type="button" class="btn btn-primary" name="add_user" ng-click="save_user()">Invite</button>
                <button type="reset" class="btn btn-warning">Cancel</button>                
              </div>
            </div>
            </form>
          </div>
          <!-- END SAVE RECORDS -->

          <!-- BEGIN VIEW RECORDS -->
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6" ng-app="showUser">
            <div class="panel panel-primary">
              <div class="panel-heading">
                <h3 class="panel-title">Invited List</h3>
              </div>
              <div class="panel-body">
                <div class="table-responsive">
                  <table class="table table-bordered">
                    <thead>
                      <tr>
                        <th>Scroll</th>
                        <th>Username</th>
                        <th>Email Address</th>
                      </tr>
                    </thead>
                    <tbody>
                        <tr>

                        </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <!-- END VIEW RECORDS -->

        </div>
        </section>
      </div>

    <!-- SCRIPTS -->
    <script src="js/app.js"></script>
  </body>
</html>

app.js

var app = angular.module('AddUser', []);
    app.controller('AppCtrl', function($scope, $http){
    $scope.save_user = function() {
        $http.post('./php/process.php?action=addUser', 
            {
                'user_name'  : $scope.user_name, 
                'user_email' : $scope.user_email
            }
        )
        .success(function (data) {
            $scope.user_name = null,
            $scope.user_email = null

            console.log("The user has been added successfully to the DB");
            console.log(data);

        })
        .error(function(data, status, headers, config) {
            console.log("Failed to add the user to DB ");
        });
    }

});

process.php

<?php
mysql_connect('localhost','root','');
mysql_select_db('dbtest');

if( isset($_GET['action']) && $_GET['action'] == 'addUser'){
    add_user();
}


function add_user() {

    $data = json_decode(file_get_contents("php://input")); 
    $user_name      = $data->user_name;    
    $user_email     = $data->user_email;

    $qry = "INSERT INTO `tbluser`(`UserName`, `EmailAddress`, `cuStatus`) VALUES ('".$user_name."','".$user_email."','1')";

    $qry_res = mysql_query($qry);
    if ($qry_res) {
        $arr = array('msg' => "User added successfully!!!", 'error' => '');
        $jsn = json_encode($arr);
        //print_r($jsn);
    } 
    else {
        $arr = array('msg' => "", 'error' => 'Error in inserting record');
        $jsn = json_encode($arr);

        //print_r($jsn);
    }
}

?>

如何通過同一控制器發送另一個$ http POST請求。

Answer 1

您可以將第二個請求鏈接到第一個請求的成功處理程序中：

.success(function (data) {
        $scope.user_name = null,
        $scope.user_email = null

        console.log("The user has been added successfully to the DB");
        console.log(data);

        //another request here
        $http.post()
        .success()
    })

保存后使用angular.js顯示來自mysql的數據

問題描述

1 個解決方案

解決方案1
0 2015-12-11 09:38:03

保存后使用angular.js顯示來自mysql的數據

問題描述

1 個解決方案

解決方案1 0 2015-12-11 09:38:03

解決方案1
0 2015-12-11 09:38:03