Уважаемое сообщество Stackoverflow.
Я занимаюсь этой проблемой уже несколько дней, ищу ответы на множестве форумов и блогов, но пока не нашел ни одного.Кажется, мне не хватает чего-то фундаментального.Итак, вот мой первый в истории вопрос на форуме:
Я хочу, чтобы Angular $ http вызвал php-файл и обработал ответ.Когда я вызываю php-файл прямо в браузере, я получаю ожидаемый результат примерно так:
{"records":[{"id":"My ID"}]}
Как только я вызываю тот же самый файл с Angular $ http через мой контроллер Angular (я знаю, что этоустарела), я получу только код состояния "200 OK".
Пока это мой код:
PHP return_json.php
<?php
header("Content-Type: application/json; charset=UTF-8");
// DEBUG MODE
ini_set('display_errors', 'On');
error_reporting(E_ALL);
$id = "My ID";
$data = '{';
$data .= '"id":"' . $id . '"';
$data .= '}';
echo '{"records":[' . $data . ']}';
?>
HTML / JS (угловой)
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
TEST // Angular http with PHP
</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="assets/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="assets/bootstrap/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="assets/css/test.css" />
</head>
<body ng-app="testAjax" ng-controller="testAjaxCtrl">
<!-- ---------------------
HEADER
---------------------- -->
<header>
<div class="container">
<h1>TEST: Angular http</h1>
</div>
</header>
<!-- ---------------------
SECTION Test Form
---------------------- -->
<section id="">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h2>Test Form</h2>
<form name="test" action="" method="" novalidate>
<fieldset>
<legend>Input Params</legend>
<input type="text" ng-model="testParam" name="testName" placeholder="Input testParam" />
</fieldset>
<button ng-click="getServerAnswer()">submit</button>
</form>
</div>
<div class="col-lg-6">
<h2>Angular Scope Values</h2>
<p>Name: {{testParam}}</p>
</div>
</div>
</div>
</section>
</body>
<!-- ---------------------
SCRIPT
---------------------- -->
<!-- jQuery -->
<script src="assets/js/jquery-3.0.0.min.js"></script>
<!-- Bootstrap -->
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<!-- Angular -->
<script src="assets/angular/angular.1.6.10.min.js"></script>
<script src="assets/angular/angular-sanitize.min.js"></script>
<script type="text/javascript">
/* Test Angular http */
var app = angular.module('testAjax', ['ngSanitize']);
app.controller('testAjaxCtrl', function($scope, $http) {
// call return_json.php
$scope.getServerAnswer = function(){
$http({
method: 'GET',
url: 'return_json.php'
}).then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
alert("successCallback");
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
}
});
</script>
</html>
Чего мне не хватает?Ваша помощь очень ценится.