2014-02-12 53 views
2

我需要編輯數據到數據庫並使其成爲立即使用角度xeditables的視圖,但我無法將數據傳遞給process.php(以更新數據庫和檢索回數據)

我如何可以通過使用數據$ http.post

代碼片斷

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> 
<script src="http://code.angularjs.org/1.0.8/angular-mocks.js"></script> 
<link href="angular-xeditable-0.1.8/css/xeditable.css" rel="stylesheet"> 
<script src="angular-xeditable-0.1.8/js/xeditable.js"></script> 
<script> 
var app = angular.module("app", ["xeditable", "ngMockE2E"]); 
app.run(function(editableOptions) { 
    editableOptions.theme = 'bs3'; 
}); 
app.controller('Ctrl', ['$scope','$filter','$http', function($scope, $filter,$http) { 
$scope.user = { 
    name: 'awesome user', 
    status: 2, 
    group: 4 
    }; 
    $scope.statuses = [ 
    {value: 1, text: 'status1'}, 
    {value: 2, text: 'status2'}, 
    {value: 3, text: 'status3'}, 
    {value: 4, text: 'status4'} 
    ]; 
    $scope.groups = [ 
    {value: 1, text: 'user'}, 
    {value: 2, text: 'customer'}, 
    {value: 3, text: 'vip'}, 
    {value: 4, text: 'admin'} 
    ]; 
    $scope.errors = []; 
    $scope.msgs = []; 
    $scope.saveUser = function() 
    { // $scope.user already updated! 
    return $http.post('/saveUser', $scope.user).error(function(err) {}); 
    $scope.errors.splice(0, $scope.errors.length); // remove all error messages 
    $scope.msgs.splice(0, $scope.msgs.length); 

     $http.post('include/process.php', {'name': $scope.name, 'status': $scope.status, 'group': $scope.group} 
     ).success(function(data, status, headers, config) { 
      if (data.msg != '') 
      { 
       $scope.msgs.push(data.msg); 
      } 
      else 
      { 
       $scope.errors.push(data.error); 
      } 
     }).error(function(data, status) { // called asynchronously if an error occurs 
    // or server returns response with an error status. 
      $scope.errors.push(status); 
     }); 
    }; 
}]); 
app.run(function($httpBackend) { 
    $httpBackend.whenPOST(/\/saveUser/).respond(function(method, url, data) { 
    data = angular.fromJson(data); 

    }); 
}); 
</script> 

HTML

.....

<div ng-app="app" ng-controller="Ctrl"> 

         <form editable-form name="editableForm" > 
         <ul> 
        <li class="err" ng-repeat="error in errors"> {{ error}} </li> 
       </ul> 
       <ul> 
        <li class="info" ng-repeat="msg in msgs"> {{ msg}} </li> 
       </ul> 
          <div class="pull-right"> 
          <!-- button to show form --> 
          <button type="button" class="btn btn-default btn-sm" ng-click="editableForm.$show()" ng-show="!editableForm.$visible"> Edit </button> 
          <!-- buttons to submit/cancel form --> 
          <span ng-show="editableForm.$visible"> 
          <button type="submit" class="btn btn-primary btn-sm" ng-disabled="editableForm.$waiting" onaftersave="saveUser()"> Save </button> 
          <button type="button" class="btn btn-default btn-sm" ng-disabled="editableForm.$waiting" ng-click="editableForm.$cancel()"> Cancel </button> 
          </span> </div> 
          <div> 
          <!-- editable username (text with validation) --> 
          <span class="title">User name: </span> <span editable-text="user.name" e-id="myid" e-name="name" e-required>{{ user.name || 'empty' }}</span> 
          </div> 
          <div> 
          <!-- editable status (select-local) --> 
          <span class="title">Status: </span> <span editable-select="user.status" e-name="status" e-ng-options="s.value as s.text for s in statuses"> {{ (statuses | filter:{value: user.status})[0].text || 'Select' }} </span> </div> 
          <div> 
          <!-- editable group (select-remote) --> 
          <span class="title">Group: </span> <span editable-select="user.group" e-name="group" e-ng-options="g.value as g.text for g in groups"> {{ (groups | filter:{value: user.group})[0].text || 'Select' }} </span> </div> 
         </form> 
         </div> 

....

PROCESS.PHP

<?php 

$data = json_decode(file_get_contents("php://input")); 
$name = mysql_real_escape_string($data->name); 
$status = mysql_real_escape_string($data->status); 
$group = mysql_real_escape_string($data->group); 


if ($group == 'vip') { 
    if ($qry_res) { 
     $arr = array('msg' => "User Created 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); 
    } 
} else { 
    $arr = array('msg' => "", 'error' => 'User Already exists with same email'); 
    $jsn = json_encode($arr); 
    print_r($jsn); 
} 
?> 
+0

您的process.php不會被調用,因爲您在$ scope.saveUser = function()中首先返回$ http.post('/ saveUser',$ scope.user)「行,該行立即結束執行saveUser函數 – Giuseppe

回答

0

我不知道這是否會是你或別人有用。 012faAfaik,你不能使用http.post和angular來更新數據庫(至少在我的情況下,使用php和mysql)。您需要使用$ HTTP()喜歡如下:

var request = $http({ 
     method: "post", 
     url: "include/process.php", 
     data: { 
      name: $scope.name, 
      status: $scope.status, 
      group: $scope.group 
     }, 
     headers: { 'Content-Type': 'application/x-www-form-urlencoded' } 
    }); 

然後,在PHP中,檢索它想:

<?php 
    $postdata = file_get_contents("php://input"); 
    $request = json_decode($postdata); 
    @$name = $request->name; 
    @$status = $request->status; 
    @$group = $request->group; 
    ... 
?> 

與AT $名稱,$地位,你會$組值能夠更新你的數據庫。

UPDATE:您process.php不叫,因爲你有一個 「返回$ http.post( '/ saveUser',$ scope.user)」 行頭在$ scope.saveUser =()的函數,它立即結束執行saveUser函數。請參閱return statement in Javascript

當在函數中調用return語句時,停止執行此函數。如果指定,則將給定值返回給函數調用方。如果省略表達式,則返回undefined。