Angular.js xeditable $ http.post数据处理

时间:2014-02-12 18:56:20

标签: php ajax json angularjs x-editable

我需要将数据编辑为db并使其成为即时视图并使用angular 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);
}
?>

1 个答案:

答案 0 :(得分:0)

我不知道这对你或其他人是否有用。 Afaik,你不能使用带有角度的http.post来更新数据库(至少在我的情况下,使用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;
    ...
?>

使用$ name,$ status和$ group的值,您将能够更新数据库。

更新:您的process.php未被调用,因为您有&#34;返回$ http.post(&#39; / saveUser&#39;,$ scope.user)&#34; $ scope.saveUser = function()中的第一行,它立即结束saveUser函数的执行。见return statement in Javascript

  

在函数中调用return语句时,将停止执行此函数。如果指定,则将给定值返回给函数调用者。如果省略表达式,则返回undefined。