javascript - Angular POST 到 API 不传递数据

Question

所以我正在使用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 响应，它与我的 Angular 代码配合得很好。

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

但是当与我的 Angular 代码一起使用时，它已经不起作用了。

我的代码

    $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"

这意味着数据不会传递到 API，尽管当我使用 Chrome 的 REST 客户端时它可以工作。

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

更新:

首先，我对数据变量进行 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 Controller 中我尝试过:

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

我明白了:

现在我只需访问它即可。当我尝试 $this->request->post('name') 时，我仍然收到错误。那么如何正确获取json对象呢？

Answer 1

$http POST 默认以 json 形式发送数据，因此您需要在 PHP 中解析 json 字符串，然后才能访问 name 属性，或者您可以将 $http 参数中的 header 更改为 application/x-www-form-urlencoded 如果您想要像提交表单一样获取参数。