API的Angular POST不会传递数据

时间:2016-12-24 05:16:22

标签: javascript php angularjs api post

所以我在我的项目中使用makoframework和AngularJS,目前遇到了一些问题。

因此,在我的表customers中,customer_name字段不可为空。我从customers表中获取所有数据的当前代码是这样的。

function CustomerCtrl($scope, Customers, DTOptionsBuilder) {
   $scope.loadCustomers = function () {
        Customers.getCustomers()
            .then(function (response) {
                $scope.customers = response.data;
            }, function (error) {
                console.log(error);
            });
    }
}

//factory

function Customers($http) {
  return {
        getCustomers: function () {
            return $http.get('/api/customers');
  },
        addCustomer: function (data) {
                return $http({
                    method: 'POST',
                    url: '/api/customers',
                    data: data
                });
            }
}

/api/customers返回一个json响应,它与我的角度代码一起使用。

现在我在我的php中有另一条路线是/api/products POST,当我尝试使用Chrome的Advanced Rest Client添加数据时,它也有效。

但是当使用我的角度代码时,它不起作用。

我的代码

    $scope.addCustomer = function () {
           alert($scope.customerData.full_name); // THIS ALERT IS WORKING
            var data = {
                'name': $scope.customerData.full_name,
            }
            Customers.addCustomer(data)
                .then(function (response) {
                    $scope.customerSpinner = true;
                    var message = response.data.message;
                    console.log(response);
                    $scope.customerData = {};
                    $scope.loadCustomers();
                    Materialize.toast('<i class="mdi-navigation-check left"></i> ' + message, 3000, 'green darken-2 white-text');
                }, function (error) {
                    console.log(error);
                });
    }

// HTML

   <div id="addCustomerModal" class="modal">
        <div class="modal-content">
            <h4>Add Customer</h4>
            <div class="row">
                <form action="" class="col s12">
                    <div class="input-field col s6">
                        <input id="full_name" type="text" class="validate" ng-model="customerData.full_name">
                        <label for="full_name">Full Name</label>
                    </div>
                </form>
            </div>
        </div>
        <div class="modal-footer">
            <a class="waves-effect btn-flat teal lighten-2 white-text" ng-click="addCustomer()">Submit <i class="mdi-content-send right"></i></a>
        </div>
    </div>

// /api/products

$routes->post('/api/customers', 'app\controllers\CustomerController::create');
    public function create()
    {
        // take note that this works using a restful client from chrome
        $customer = new Customer();
        $customer->customer_name = $this->request->post('name');

        if($customer->save()) {
            $result = array('success' => true, 'message' => 'Customer '.$this->request->post('name').' has been added.');
        }
        else {
            $result = array('success' => false, 'message' => 'Error adding customer.');
        }
        return $this->jsonResponse($result);
    }

正如您在addCustomer $scope中看到的那样,我添加了alert($scope.customerData.full_name);,它确实有效。我得到了数据。

但我收到一条SQL错误

"SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'customer_name' cannot be null"

这意味着当我从Chrome使用REST客户端时,数据不会传递给API。

我在这里遗漏了什么吗?任何帮助将不胜感激。

更新

首先,我将json字符串化数据变量:

var data = JSON.stringify({
  'name': $scope.customerData.full_name,
});

并将内容类型更改为application/x-www-form-urlencoded

           addCustomer: function (data) {
                return $http({
                    method: 'POST',
                    url: '/api/customers',
                    data: data,
                    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
                });
            }

在我的php控制器中我尝试过:

return $this->jsonResponse($this->request->post());

我明白了:

enter image description here

现在我只需要访问它。当我尝试$this->request->post('name')时,我仍然会收到错误消息。那么我怎样才能正确获取json对象?

1 个答案:

答案 0 :(得分:0)

$ http POST默认情况下在json中发送数据,因此您需要在PHP中解析json字符串才能访问name属性,或者您可以将$ http参数中的标题更改为application / x-www-form-urlencoded if你希望在提交表格时获得参数。