AngularJS публикует данные json + проверка на стороне сервера в codeigniter

Я искал по всему Интернету, как формировать данные проверки, отправленные запросом Angular js $http POST в codeigniter.

Для ясного понимания я разместил полные данные HTML. Я считаю, что большинство разработчиков ищут это решение.

Вот моя HTML-форма:

<!DOCTYPE html>
<html>
    <head>
        <style>
            input[type="text"].ng-invalid{border: 1px solid red; }
        </style>
    </head>
    <body ng-app="app" ng-controller="ctrl">

        <form name="test_form" ng-submit="send_data()">
            <input type="text" name="email" ng-model="email">
            <span ng-show="test_form.email.$invalid - required">Required</span>

            <input type="password" name="password" ng-model="password">
            <span ng-show="test_form.email.$invalid - required">Required</span>

            <button type="submit">Submit</button>
        </form>


        <script src="<?php echo base_url('assets/angular/angular.min.js'); ?>" type="text/javascript">
        </script>
        <script>
                    angular.module('app', [])
                    .controller('ctrl', function ($scope, $http) {
                        $scope.send_data = function () {
                            $http({
                                method: "POST",
                                url: "<?php echo base_url('login/test_angular_validate'); ?>",
                                data: {email: $scope.email, password: $scope.password},
                                headers : {'Content-Type': 'application/x-www-form-urlencoded'}
                            }).then(function (success) {
                                console.log(success);
                            }, function (error) {

                            })
                        }
                    });
        </script>
    </body>
</html>

Функция контроллера входа в систему Codeigniter

<?php
public function test_angular_validate() {
    $form_data = json_decode(file_get_contents("php://input"), true);

    $this->load->helper(array('form', 'url'));

    $this->load->library('form_validation');

    $this->form_validation->set_rules('email', 'email', 'required|min_length[3]');
    $this->form_validation->set_rules('password', 'password', 'required');

    if ($this->form_validation->run() == FALSE) {
        echo 'failed';
        print_r(validation_errors());
    } else {
        echo 'success';
    }
}
?>

Когда отправляются данные формы html с использованием углового запроса $http POST, я не могу проверить эти данные с помощью библиотеки проверки формы codeigniter. Выдает ошибку проверки, как показано на этом изображении.


php angularjs codeigniter server-side-validation
person Pavan Webbeez    schedule 18.02.2018    source источник
comment
думаю, что codeigniter должен иметь значения $_POST['email'] и $_POST['password'], которые должны быть установлены, прежде чем вы сможете использовать проверку формы codeigniter. Я советую вам написать вспомогательную функцию codeigniter для преобразования данных json в значения массива $_POST... сначала код, чтобы убедиться, что $_POST['email'] = '[email protected]'; $_POST['password'] = 'password'; перед загрузкой помощника формы   -  person Raymond Nijland    schedule 18.02.2018

Ответы (2)


arrow_upward
2
arrow_downward

Codeigniter обращается к суперглобальному $_POST для его проверки. Ваши данные JSON не привязаны к этому суперглобальному файлу. Поэтому вам нужно настроить его вручную:

$_POST = json_decode(file_get_contents("php://input"), true);

Вы также можете отправить свои данные URLENCODED. Таким образом, ваши параметры POST будут доступны в $_POST без ручной настройки.

$http({
    method: 'POST',
    url: "<?php echo base_url('login/test_angular_validate'); ?>",
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    data: {
        email: $scope.email, 
        password: $scope.password
    },
    transformRequest: function(obj) {
        var str = [];
        for(var p in obj)
            str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
        return str.join("&");
    },
}).then(function (success) {
    console.log(success);
}, function (error) {

});
person lin    schedule 18.02.2018
comment
Большое спасибо, многие разработчики сталкиваются с этой проблемой. Ваше решение работает хорошо. - person Pavan Webbeez; 18.02.2018

arrow_upward
0
arrow_downward

Поскольку вы используете библиотеку проверки формы Codeigniter, вам лучше преобразовать данные запроса в array следующим образом:

$objectRequest = json_decode( file_get_contents("php://input") );
$this->request = xss_clean(json_decode(json_encode($objectRequest), true));

Также вам не нужно использовать функцию set_rules для каждого данных, вместо этого вы можете управлять ими в файле config/form_validation.php, как указано здесь.

Вот пример в form_validation.php:

$config = [

    'user_config' => [
        [
            'field' => 'user[phone]',
            'rules' => 'required|numeric|max_length[100]|min_length[10]'
        ],
        [
            'field' => 'user[phoneCode]',
            'rules' => 'required|numeric'
        ]
    ],
];

Затем в вашем коде:

if ( !$this->form_validation->run('user_config') ) exit();

Просто нужно иметь соответствующие имена в Angularjs формах (ng-модель)

Пример:

<span class="form_row">
    <input ng-model="login.user.phoneCode" name="phoneCode" ng-required="true" ng-pattern="mobileCodePattern" size="6" type="text">
</span>
<span class="form_row">
    <input ng-model="login.user.phone" name="phone" ng-required="true" ng-pattern="numberOnly" type="text">
</span>

И отправьте $scople.login на сервер.

person Vahid Najafi    schedule 18.02.2018