我想知道为什么我的AngularJS http服务总是返回一个状态为-1的错误。
我有PHP代码和运行这作为localhost/ajax.php。这个文件可以从数据库中检索数据。php运行良好。检索到的数据如下:
[{"id":"1","Name":"Mark","Gender":"Male","City":"London"},
{"id":"2","Name":"John","Gender":"Male","City":"Chenni"},
{"id":"3","Name":"Hint","Gender":"Male","City":"Singapore"},
{"id":"4","Name":"Sara","Gender":"Female","City":"Sydney"},
{"id":"5","Name":"Tom","Gender":"Male","City":"New York"},
{"id":"6","Name":"Pam","Gender":"Male","City":"Los Angeles"},
{"id":"7","Name":"Catherine","Gender":"Female","City":"Chicago"},
{"id":"8","Name":"Mary","Gender":"Femal","City":"Houston"},
{"id":"9","Name":"Mike","Gender":"Male","City":"Phoenix"},
{"id":"10","Name":"Rosie","Gender":"Female","City":"Manchestor"},
{"id":"11","Name":"Lim","Gender":"Male","City":"Singapore"},
{"id":"12","Name":"Tony","Gender":"Male","City":"Hong Kong"},
{"id":"13","Name":"Royce","Gender":"Male","City":"London"},
{"id":"14","Name":"Hitler","Gender":"Male","City":"Germany"},
{"id":"15","Name":"Tommy","Gender":"Male","City":"New Jersy"}]
这个PHP文件是从我的AngularJS http服务中调用的，但是调用总是返回一个状态为-1的错误。
我看了所有的资料，但没有找到任何线索。我的数据库设置在本地主机使用Sql。
我的查询是什么可能是错误的。我认为这些是使http服务返回错误状态-1。
我的代码如下:
Ajax.php
<?php
require 'connect.php';
$connect = connect();
// Get the data
$students = array();
$sql = "SELECT id, Name, Gender, City FROM tblStudents";
if($result = mysqli_query($connect,$sql))
{
$count = mysqli_num_rows($result);
$cr = 0;
while($row = mysqli_fetch_assoc($result))
{
$students[$cr]['id'] = $row['id'];
$students[$cr]['Name'] = $row['Name'];
$students[$cr]['Gender'] = $row['Gender'];
$students[$cr]['City'] = $row['City'];
$cr++;
}
}
$json = json_encode($students);
echo $json;
exit;
?>
connect.php
<?php
// db credentials
define('DB_HOST', 'localhost');
define('DB_USER','root');
define('DB_PASS','nyan');
define('DB_NAME','Students');
// Connect with the database.
function connect()
{
$connect = mysqli_connect(DB_HOST ,DB_USER ,DB_PASS ,DB_NAME);
if (mysqli_connect_errno($connect))
{
die("Failed to connect:" . mysqli_connect_error());
}
mysqli_set_charset($connect, "utf8");
return $connect;
}
?>
Script.js
var app = angular.module("Demo", ["ngRoute"])
.config(function($routeProvider){
$routeProvider
.when("/home", {
templateUrl:"Templates/home.html",
controller:"homeController"
})
.when("/courses", {
templateUrl:"Templates/courses.html",
controller:"coursesController"
})
.when("/students", {
templateUrl:"Templates/students.html",
controller:"studentsController"
})
})
.controller("homeController", function($scope){
$scope.message = "Home Page";
})
.controller("coursesController", function($scope){
$scope.courses = ["C#", "VB.NET", "SQL Server", "ASP.NET"];
})
.controller("studentsController", function ($scope, $http) {
$scope.students;
$http({
method: 'GET',
url: 'api/ajax.php'
}).then(function (response) {
$scope.students = response.data;
}, function (response) {
console.log(response.data,response.status);
});
});
index . html
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html ng-app="Demo">
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="Scripts/angular.min.js" type="text/javascript"></script>
<script src="Scripts/angular-route.min.js" type="text/javascript"></script>
<script src="Scripts/Script.js" type="text/javascript"></script>
<link href="Styles.css" rel="stylesheet" type="text/css"/>
</head>
<body >
<table style="font-family: Arial">
<tr>
<td colspan="2" class="header">
<h1>
WebSite Header
</h1>
</td>
</tr>
<tr ng-controller="studentsController">
<td class="leftMenu">
<a href="#/home">Home</a>
<a href="#/courses">Courses</a>
<a href="#/students">Students</a>
</td>
<td class="mainContent">
<ng-view></ng-view>
</td>
</tr>
<tr>
<td colspan="2" class="footer">
<b>Website Footer</b>
</td>
</tr>
</table>
</body>
</html>
您在问题中声明您的脚本可能因为数据库查询而中断。
当您的查询需要很长时间时，可能会导致超时。响应码-1通常表示请求被终止，例如使用配置。根据angularjs文档https://docs.angularjs.org/api/ng/service/$http.
您可以尝试增加超时时间:
$http.get('ajax.php', {timeout: 5000, method: 'GET'});
在这个例子中，它将被设置为5秒。测试你的ajax.php，看看你的请求需要多长时间。
编辑:还要确保使用正确的URL。在您的问题中，您使用不同的URL来测试ajax调用。
终于，真的终于，我做到了。下面的代码使这个过程工作。
index . php
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="Scripts/angular.min.js" type="text/javascript"></script>
<script src="Scripts/angular-route.js" type="text/javascript"></script>
<script src="Scripts/Script.js" type="text/javascript"></script>
<link href="Styles.css" rel="stylesheet" type="text/css"/>
</head>
<body ng-app="Demo">
<table style="font-family: Arial">
<tr>
<td colspan="2" class="header">
<h1>
WebSite Header
</h1>
</td>
</tr>
<tr>
<td class="leftMenu">
<a href="#/home">Home</a>
<a href="#/courses">Courses</a>
<a href="#/students">Students</a>
</td>
<td class="mainContent">
<ng-view></ng-view>
</td>
</tr>
<tr>
<td colspan="2" class="footer">
<b>Website Footer</b>
</td>
</tr>
</table>
</body>
</html>
database.php
<?php
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
class Database{
// specify your own database credentials
private $host = "localhost";
private $db_name = "Students";
private $username = "root";
private $password = "nyan";
public $conn;
// get the database connection
public function getConnection(){ $this->conn = null;
try{
$this->conn = new PDO("mysql:host=" . $this->host . ";dbname=" . $this->db_name, $this->username, $this->password);
}catch(PDOException $exception){
echo "Connection error: " . $exception->getMessage();
}
return $this->conn;
}
}
?>
Students.php
<?php
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
class Students{
// database connection and table name
private $conn;
private $table_name = "tblStudents";
// object properties
public $id;
public $name;
public $gender;
public $city;
// constructor with $db as database connection
public function __construct($db){
$this->conn = $db;
}
// read products
public function readAll(){
// select all query
$query = "SELECT
id, name, gender, city
FROM
" . $this->table_name . "
ORDER BY
id";
// prepare query statement
$stmt = $this->conn->prepare( $query );
// execute query
$stmt->execute();
return $stmt;
}
}
?>
ReadStudents.php
<?php
// include database and object files
include_once 'database.php';
include_once 'Students.php';
// instantiate database and product object
$database = new Database();
$db = $database->getConnection();
// initialize object
$students = new Students($db);
// query products
$stmt = $students->readAll();
$num = $stmt->rowCount();
$data="";
// check if more than 0 record found
if($num>0){
$x=1;
// retrieve our table contents
// fetch() is faster than fetchAll()
// http://stackoverflow.com/questions/2770630/pdofetchall-vs-pdofetch-in-a-loop
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
// extract row
// this will make $row['name'] to
// just $name only
extract($row);
$data .= '{';
$data .= '"id":"' . $id . '",';
$data .= '"name":"' . $name . '",';
$data .= '"gender":"' . $gender . '",';
$data .= '"city":"' . $city . '"';
$data .= '}';
$data .= $x<$num ? ',' : ''; $x++; }
}
// json format output
echo '{"records":[' . $data . ']}';
?>
Script.js
var app = angular.module("Demo", ["ngRoute"])
.config(function($routeProvider){
$routeProvider
.when("/home", {
templateUrl:"Templates/home.html",
controller:"homeController"
})
.when("/courses", {
templateUrl:"Templates/courses.html",
controller:"coursesController"
})
.when("/students", {
templateUrl:"Templates/students.html",
controller:"studentsController"
})
})
.controller("homeController", function($scope){
$scope.message = "Home Page";
})
.controller("coursesController", function($scope){
$scope.courses = ["C#", "VB.NET", "SQL Server", "ASP.NET"];
})
.controller("studentsController", function ($scope, $http) {
$http.get("api/ReadStudents.php").success(function(response){
$scope.students = response.records;
});
});
courses.html
<h1>Courses we offer</h1>
<ul>
<li ng-repeat="course in courses">{{course}}</li>
</ul>
home。
<h1>{{message}}</h1>
<div>
PRAGIM established in 2000 by 3 s/w engineers offers very cost effective training.
</div>
<ul>
<li>Training delivered by real time softwares experets</li>
<li>Realtime project discussion relating to the possible interview questions</li>
<li>Trainees can attend training and use lab untill you get a job</li>
<li>Resume preparation and mockup interviews</li>
<li>100% placement assistant</li>
<li>lab facility</li>
</ul>
students.html
<h1>List of students</h1>
<ul >
<li ng-repeat="student in students">{{student.name}}</li>
</ul>