Angular POST to API不传递数据

Question

So I am using makoframework and AngularJS for my project and currently having some problems.

So in my table customers , the customer_name field is not nullable. My current code where I get all the data from customers table is this.

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
                });
            }
}

The /api/customers returns a json response and it works well with my angular code.

Now I have another route in my php which is /api/products POST and when I try adding data using Advanced Rest Client of Chrome.. it also works.

But then when using with my angular code, it doesnt work already.

My code

    $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);
    }

As you can see in the addCustomer $scope , I added an alert($scope.customerData.full_name); and it actually works. I get the data.

But I get an SQL error saying

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

Which means the data is not passed to the API though it works when I am using a REST Client from Chrome.

Am I missing something here? Any help would be much appreciated.

UPDATE:

First, I json stringified the data variable:

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

and changed content type to 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'}
                });
            }

And in my php controller I tried:

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

And I get this:

Now I just have to access it. When I try $this->request->post('name') , I still get an error. So How can I properly get the json object?

Answer 1

默认情况下$ http POST在json中发送数据，所以你需要在PHP中解析json字符串才能访问name属性，或者你可以将$ http params中的头文件更改为application / x-www-form-urlencoded如果你想在提交表格时获取参数。