Соединение AngularJS и CodeIgniter (вызовы GET работают, но POST нет)

0

EDIT: Он работает на IE! Поэтому мой Chrome и Mozilla должны блокировать вызов POST. FYR: У меня есть разрешение Allow-Control-Allow-Origin, установленное в Chrome.


Я хотел бы подключить AngularJS (я запускаю его в рамках JavaScript - npm, gulp и bower - на MyDocuments) и CodeIgniter (который находится на XAMPP).

GET работает нормально (я получаю имена пользователей и их города на экране через AngularJS).

Но у меня есть проблема для запуска этой функции POST (которая добавляет нового пользователя в базу данных):

$scope.addUser = function(name,city) {
    $http.post("http://localhost/test/index.php/usercontroller/addUser",{'name':name,'city':city})
        .success(function(response) {$scope.answer=response})
        .error(function(response) {alert('error');$scope.answer = response});
};

Когда я его назову, в консоли есть ошибка:

ОПЦИИ http://localhost/test/usercontroller/add 500 (Внутренняя ошибка сервера) (анонимная функция) @angular.js: 10413sendReq @angular.js: 10232 $ get.serverRequest @angular.js: 9944processQueue @angular.js: 14454 (анонимная функция) @angular.js: 14470 $ get.Scope. $ eval @angular.js: 15719 $ get.Scope. $ digest @angular.js: 15530 $ get.Scope. $ apply @angular.js: 15824 ( анонимная функция) @angular.js: 23095eventHandler @angular.js: 3247 (index): 1 XMLHttpRequest не может загрузить http://localhost/test/usercontroller/add. Недействительный код состояния HTTP 500

Структура моих папок выглядит следующим образом:

CODEIGNITER - КОНТРОЛЛЕР

XAMPP/HTDOCS/тест/приложение/контроллеры/usercontroller.php

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Usercontroller extends CI_Controller {

    public function __construct()
    {
        parent::__construct();
        $this->load->model('usermodel');
        header('Access-Control-Allow-Origin: *');
        header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
        header('Content-type: application/json');
        header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
    }

    public function index()
    {
        $data['include'] = 'user/index';
        $this->load->view('user/index', $data);
    }

    public function addUser()
    {
        $postdata = file_get_contents("php://input");
        $request = json_decode($postdata);
        $name = $request->name;
        $city = $request->city;
        $id = $this->usermodel->addUser($name,$city);
        if($id)
        {
            echo '{"status" : "success"}';
        }
        else
        {
            echo '{"status" : "failure"}';
        }
    }

    public function getCities()
    {
        $cities = $this->usermodel->getCities();
        echo json_encode($cities);
    }

    public function getUsers()
    {
        $users = $this->usermodel->getUsers();
        echo json_encode($users);
    }

}   

CODEIGNITER - МОДЕЛЬ

XAMPP/HTDOCS/тест/приложение/модель/usermodel.php

<?php if (!defined('BASEPATH')) exit('No direct script allowed');

class Usermodel extends CI_Model {

    public function __construct()
    {
       parent::__construct();
    }

    public function addUser($name,$city)
    {
        $data = array('name' =>$name,'city' => $city);
        $this->db->insert('user',$data);
        $insert_id = $this->db->insert_id();
        return $insert_id;
    }

    public function getCities()
    {
        $sql='SELECT city FROM user';
        $query = $this->db->query($sql);
        $city = array();
        foreach($query->result() as $row)
        {
            $city[]=array("city" => $row->city);
        }
        return $city;
    }

    public function getUsers()
    {
        $sql='SELECT * FROM user';
        $query = $this->db->query($sql);
        $user = array();
        foreach($query->result() as $row)
        {
            $user[]=array(
                "name" => $row->name, 
                "city" => $row->city
            );
        }
        return $user;
    }

}

ANGULAR - APP

MyDocuments/тест/SRC/app.js

angular.module('app', []);

ANGULAR - INDEX.HTML

MyDocuments/тест/SRC/index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <title>Test project</title>

    <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">

    <script src="../bower_components/angular/angular.js"></script>

    <script src="js/all.js"></script>

</head>

<body ng-app="app">
    <div ng-controller="MainController">


        <form novalidate>
            <label>Name:</label>
            <input type="text" ng-model="name"/>
            <div>{{name}}</div>
            <label>City:</label>
            <input type="text" ng-model="city"/>
            <div>{{city}}</div>
            <button ng-click="addUser(name,city)">Submit</button> 
            <div>Answer:{{answer}}</div>
        </form>

        <h3>Users</h3>
        <ul>
            <li ng-repeat="user in users track by $index">{{ user.name }}, {{user.city}}</li>
        </ul>

    </div>
</body>
</html>

УГОЛЬНЫЙ - КОНТРОЛЛЕР

MyDocuments/тест/SRC/компоненты/MainController.js

angular.module('app').controller('MainController', function($scope, $http) {

    $http.get("http://localhost/test/index.php/usercontroller/getUsers")
        .success(function(response) {$scope.users = response});

    $http.get("http://localhost/test/index.php/usercontroller/getCities")
        .success(function(response) {$scope.cities = response});

    $scope.addUser = function(name,city) {
        $http.post("http://localhost/test/index.php/usercontroller/addUser",{'name':name,'city':city})
        .success(function(response) {$scope.answer=response})
        .error(function(response) {alert('error');$scope.answer = response});
    };

});

Я делаю что-то неправильно?

Есть ли проблема в том, что у меня есть JavaScript-фреймворк в MyDocuments и CodeIgniter на XAMPP. Я также попытался разместить всю папку JavaScript (с npm, gulp и bower) на XAMPP (не знаю, хорошая ли это идея, но я все равно пробовал), и я получаю такую же ошибку 500, когда запуск этого запроса addUser() POST.

Еще одна вещь, которую я пробовал, заключается в том, что я поставил супер простой angular.html (прикрепленный внизу этого сообщения) непосредственно на xampp/htdocs, и в этом случае вызов POST работает отлично.

Поэтому я думаю, что существует проблема в обмене между JavaScript (угловыми, npm, gupl, bower) и папками CodeIgniter.

Есть ли какие-либо меры для их подключения? Звонки GET работают, поэтому я предполагаю, что также должно быть решение для вызовов POST. Заранее благодарю за любые подсказки.

SUPER SIMPLE ANGULAR.HTML ПРЯМАЯ НА XAMPP/HTDOCS

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  </head>

<body>
    <div ng-app="app" ng-controller="MainController">

        <form novalidate>
            <label>Name:</label>
            <input type="text" ng-model="name"/>
            <div>{{name}}</div>
            <label>City:</label>
            <input type="text" ng-model="city"/>
            <div>{{city}}</div>
            <button ng-click="addUser(name,city)">Submit</button> 
            <div>Answer:{{answer}}</div>
        </form>

        <h3>Users</h3>
        <ul>
            <li ng-repeat="user in users track by $index">{{ user.name }}, {{user.city}}</li>
        </ul>
    </div>

<script>

    var app = angular.module('app', []);

    app.controller('MainController', function($scope, $http) {
            console.log('delam');
            $http.get("http://localhost/ekohrana/index.php/usercontroller/getUsers")
        .success(function(response) {$scope.users = response});

        $scope.addUser = function(name,city) {
         $http.post("http://localhost/ekohrana/index.php/usercontroller/addUser",{name:name,city:city})
         .success(function(response) {$scope.answer=response})
         .error(function(response) {alert('error');$scope.answer = response});
         };

    });

</script>

</body>
</html>
Теги:
codeigniter
post

1 ответ

0
Лучший ответ

Проблема в том, что вы делаете запрос на отправку CORS, поэтому браузер пытается сделать первые ВАРИАНТЫ вызовами на ваш сервер на том же URL-адресе, что и POST, и если вы не ответили правильно на запрос OPTIONS, ваш интерфейс не будет работать.

   function __construct() {

        header('Access-Control-Allow-Origin: *');
        header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method");
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
        $method = $_SERVER['REQUEST_METHOD'];
        if($method == "OPTIONS") {
            die();
        }
        parent::__construct();

Ещё вопросы

Сообщество Overcoder
Наверх
Меню