編輯：它在IE上工作！所以我的Chrome和Mozilla必須阻止POST調用。 FYR：我在Chrome上安裝了Allow-Control-Allow-Origin。連接AngularJS和CodeIgniter（GET調用工作，但POST不）
我想連接AngularJS（我的JavaScript框架運行它 - NPM，咽和亭子 - 在我的文檔）和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});
};
當我喊它，它有在控制檯中的錯誤：
OPTIONS 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（anonymous function） @ angular.js：23095eventHandler @ angular.js：3247（index）：1 XMLHttpRequest無法加載 http://localhost/test/usercontroller/add。無效的HTTP狀態代碼500
我的文件夾的結構如下：
笨 - CONTROLLER
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/test/application /models/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
我的文檔/測試/ SRC/app.js
angular.module('app', []);
ANGULAR - INDEX.HTML
我的文檔/測試/ 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>
ANGULAR - 控制器
我的文檔/測試/ 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});
};
});
難道我做錯了什麼？
在XAMPP的MyDocuments和CodeIgniter上有一個JavaScript框架是否存在問題。我也嘗試過在XAMPP上放置整個JavaScript文件夾（使用npm，gulp和bower）（不知道這是個好主意，但是我已經嘗試過了），並且當出現同樣的500錯誤時運行addUser（）POST調用。
我試過的另一件事是我已經把一個超級簡單的angular.html（附在本文的底部）直接放在xampp/htdocs上，在這種情況下POST調用完美地工作。
所以我想JavaScript（angular，npm，gupl，bower）和CodeIgniter文件夾之間的通信存在問題。
任何ides可以做些什麼來連接它們？ GET調用正在工作，所以我想應該還有一個POST調用的解決方案。提前感謝您的任何提示。
超級簡單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>