在 Ionic 框架中通过 JavaScript 从 PHP 获取 JSON 数组

2024-03-28

我正在尝试从服务器端 PHP 文件获取 JSON 数组。我将 PHP 设置为查询 MySQL 数据库并将结果作为 JSON 数组返回。我正在使用离子框架来开发应用程序。目前,我的应用程序使用硬编码的 JSON 数组,这需要用从 PHP 获得的数组替换。

在该文件中,chats 变量应包含 PHP 文件中的 JSON 数组。

    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;
    }
  };
});

这是从应用程序内访问数组的位置:

<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 文件:

<?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:

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
  };
});

我尝试过使用异步调用(我并不完全熟悉)。我需要在应用程序启动时准备好数组

Thanks!


这有效:

<!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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 Ionic 框架中通过 JavaScript 从 PHP 获取 JSON 数组 的相关文章

随机推荐