AngularJS的http服务总是返回错误 [英] AngularJS's http service always returns error
本文介绍了AngularJS的http服务总是返回错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想知道为什么我的AngularJS http服务总是返回状态为-1的错误.
I am wondering why my AngularJS http service is always returning an error with status -1.
我有PHP代码，并以localhost/ajax.php的身份运行.该文件可以从数据库中检索数据.因此，php可以正常工作.检索到的数据如下:
I have PHP code and run this as localhost/ajax.php. This file can retrieve data from the database. So php is working fine. The retrieved data is as follows:
[{"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的错误.
This PHP file is called from my AngularJS http service, but that call returns always an error with status -1.
我查看了所有资源，但没有任何线索.我的数据库是使用Sql在本地主机上设置的.
I looked at all the resources but got no clues. My database is setup at localhost using Sql.
我的查询可能是错误.我认为这些使http服务返回的错误状态为-1.
My queries are what could be the error. I think that those are making the http service return with error status -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
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
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
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>
推荐答案
最后，真的可以了.以下代码使该过程正常运行.
Finally, really finally, I could make it. Following code makes the process works.
index.php
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
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
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
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
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
courses.html
<h1>Courses we offer</h1>
<ul>
<li ng-repeat="course in courses">{{course}}</li>
</ul>
home.html
home.html
<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
students.html
<h1>List of students</h1>
<ul >
<li ng-repeat="student in students">{{student.name}}</li>
</ul>
这篇关于AngularJS的http服务总是返回错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
