角度如何使用ajax提交表单

Question

您好，我是 Angular 的新手，如果用户在场，我正在尝试提交表单并检查我的 mysql 数据库。我所有的代码都可以工作，因为当我将 json 直接放在我的 php/codeigniter 代码中时，我得到了我正在寻找的员工。我认为我的问题是将数据从我的角度传输到 php。

这是我的html

<div class="login-content">
    <form ng-controller="loginController" ng-submit="processForm()" class='margin-bottom-0' accept-charset="utf-8">
        <div class="form-group m-b-20">
            <input type="text" ng-model="formData.AccessKey" required="true" id="AccessKey" class="form-control input-lg" placeholder="Access Key" />
        </div>
        <div class="form-group m-b-20">
            <input type="password" ng-model="formData.Password" required="true" id="Password" class="form-control input-lg" placeholder="Password" />
        </div>
        <div class="login-buttons">
            <button type="submit" name="IsPostBack" value="true" class="btn btn-primary btn-block btn-lg">Login</button>
        </div>
    </form>
</div>

这是我的角码

app.controller('loginController', function($scope, $http){

$scope.processForm = function(){
    $http({
        method  : 'GET',
        url     : 'http://localhost:8888/employees/login',
        data    : $scope.formData = {},
        header  : {'Content-Type': 'application/x-www-form-urlencoded'}
    })
        .success(function(data){
            console.log(data);

        })
};

});

这是我使用 codeigniter 框架的 php im。这是控制器

public function login()
{
    $this->employees_model->login();
}

这是我在 php 中的模型

public function login()
{
    $data = $this->input->get('data');

    //$data = '{"AccessKey":"candoa01@gmail.com","Password":"candoa21"}';
    $data =  json_decode($data);

    $AccessKey = $data->AccessKey;
    $Password = $data->Password;

    $sql = "SELECT *
            FROM Employees
            WHERE Employees.AccessKey = ?
            AND Employees.Password = ?";

    $query = $this->db->query($sql, array($AccessKey, $Password));

    if($query->num_rows() > 0)
    {
        $query = json_encode($query->result());
        return $this->output
            ->set_content_type('application/json')
            ->set_output($query);
    }
    else
    {
        return 'Invalid AccessKey Or Password';
    }
}

这是我遇到的错误

试图在第 173 行获取非对象的属性

第 173 行 $AccessKey = $data->AccessKey;

所以不知何故，我认为我没有正确传递值。

Answer 1

添加这个标题看看会发生什么：

{"Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"}

Answer 2

首先，您的 Angular 代码中的下一行将始终在发送请求之前重置您的 formData：

    data    : $scope.formData = {},

因此，将其更改为

    data    : $scope.formData,

其次，我认为数据配置不适用于 GET 方法。如果可能，请尝试使用 POST：

    method  : 'POST',

我不知道您使用的是什么 PHP 框架，但对我来说似乎不错。至少通过简单地解决上述问题，对话在我的情况下是有效的。

当您将来遇到类似问题时，也许您想先在服务器端记录所有请求：

Log::info($this->input->all()); // Something like this? I'm guessing.