在离子框架获取从PHP JSON数组通过JavaScript [英] Obtaining a JSON array from PHP via JavaScript in the Ionic framework
问题描述
我试图让从服务器端的PHP文件JSON数组。我有PHP建立查询MySQL数据库并返回结果为JSON阵列。我使用的是离子型框架开发的应用程序。目前，我有应用程序用硬codeD JSON数组的工作，这是需要从PHP获得的阵列来代替的东西。
I am trying to to get a JSON array from a server side PHP file. I have the PHP set up to query a MySQL database and return the result as a JSON array. I'm using the ionic framework to develop an app. At the moment I have the app working with a hard coded JSON array, this is what needs to be replaced by the array gained from the PHP.
这是其中的聊天记录变量应该包含PHP文件的JSON数组的文件。
This is the file where the chats variable should contain the JSON array from the PHP file.
angular.module('starter.services', [])
.factory('Chats', function() {
// Might use a resource here that returns a JSON array
// Some fake testing data
var chats = [{
id: 0,
name: 'Ben Sparrow',
lastText: 'You on your way?',
face: 'img/ben.png'
}, {
id: 1,
name: 'Max Lynx',
lastText: 'Hey, it\'s me',
face: 'img/max.png'
}, {
id: 2,
name: 'Adam Bradleyson',
lastText: 'I should buy a boat',
face: 'img/adam.jpg'
}, {
id: 3,
name: 'Perry Governor',
lastText: 'Look at my mukluks!',
face: 'img/perry.png'
}, {
id: 4,
name: 'Mike Harrington',
lastText: 'This is wicked good ice cream.',
face: '/img/mike.png'
}];
return {
all: function() {
return chats;
},
remove: function(chat) {
chats.splice(chats.indexOf(chat), 1);
},
get: function(chatId) {
for (var i = 0; i < chats.length; i++) {
if (chats[i].id === parseInt(chatId)) {
return chats[i];
}
}
return null;
}
};
});
下面是其中数组是从应用程序中访问：
Here is where the array is accessed from within the application:
<ion-view view-title="Chats">
<ion-content>
<ion-list>
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
<div class="list card">
<div class="item item-avatar">
<img src="{{chat.face}}">
<h2>{{chat.name}}</h2>
<p>{{chat.lastText}}</p>
</div>
<div class="">
<img ng-src="{{chat.face}}">
</div>
<a class="item item-icon-left assertive" href="#/tab/chats/{{chat.id}}">
<i class="icon ion-cash"></i>
Get Deal!
</a>
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
和下面是所使用的PHP文件：
and below is the PHP file used:
<?php
define('HOST','host');
define('USER','user');
define('PASS','password');
define('DB','db');
$con = mysqli_connect(HOST,USER,PASS,DB);
$sth = mysqli_query($con, "SELECT * FROM chats;");
$rows = array();
while($r = mysqli_fetch_assoc($sth)) {
$rows[] = $r;
}
echo json_encode($rows);
mysqli_close($con);
?>
这是controller.js：
This is the controller.js:
angular.module('starter.controllers', [])
.controller('DashCtrl', function($scope) {})
.controller('ChatsCtrl', function($scope, Chats) {
// With the new view caching in Ionic, Controllers are only called
// when they are recreated or on app start, instead of every page change.
// To listen for when this page is active (for example, to refresh data),
// listen for the $ionicView.enter event:
//
//$scope.$on('$ionicView.enter', function(e) {
//});
$scope.chats = Chats.all();
$scope.remove = function(chat) {
Chats.remove(chat);
};
})
.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
$scope.chat = Chats.get($stateParams.chatId);
})
.controller('AccountCtrl', function($scope) {
$scope.settings = {
enableFriends: true
};
});
我使用一个异步调用（这我不完全熟悉的）尝试。我需要的数组是准备在应用程序的启动
I've tried using an async call (which i'm not totally familiar with). I need the array to be ready at the start of the app
谢谢！
推荐答案
这个作品：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.factory('chats', function($http){
var chats = [];
var _loading = $http.get('http://swapi.co/api/people').then(function(res){
console.log(res.data.results);
chats = res.data.results;
});
return {
loading: _loading,
all: function(){
return chats;
}
};
});
myApp.controller('ChatsCtrl', function($scope, chats){
$scope.chats = [];
chats.loading.then(function(){
$scope.chats = chats.all();
});
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="ChatsCtrl">
<ul>
<li ng-repeat="chat in chats">{{chat.name}}</li>
</ul>
</div>
</body>
</html>
这篇关于在离子框架获取从PHP JSON数组通过JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
