angularjs--ajax
Posted 昱歌
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angularjs--ajax相关的知识，希望对你有一定的参考价值。
angularjs--ajax
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <title>index</title> 7 <link href="{$Think.const.CSSURL}bootstrap.min.css" rel="stylesheet" type="text/css"/> 8 <script src="{$Think.const.JS}jquery.min.js" type="text/javascript"></script> 9 <script src="{$Think.const.JS}bootstrap.min.js" type="text/javascript"></script> 10 <script src="{$Think.const.JS}angular.min.js" type="text/javascript"></script> 11 <link href="{$Think.const.CSSURL}home/index.css" rel="stylesheet" type="text/css"/> 12 </head> 13 <body ng-app="myapp" ng-controller="myctrl"> 14 <div class="container"> 15 <h1 class="page-header">前端技术</h1> 16 17 <table class="table table-striped table-bordered table-hover"> 18 <tr> 19 <th>id</th> 20 <th>name</th> 21 <th>city</th> 22 <th>price</th> 23 <th>number</th> 24 <th>picture</th> 25 </tr> 26 <tr ng-repeat="item in items"> 27 <td>{{item.id}}</td> 28 <td>{{item.name}}</td> 29 <td>{{item.city}}</td> 30 <td>{{item.price}}</td> 31 <td>{{item.number}}</td> 32 <td>{{item.picture}}</td> 33 </tr> 34 </table> 35 36 <img src="{$Think.const.HOMEIMG}/01.png" /> 37 </div> 38 </body> 39 <script> 40 app = angular.module("myapp",[]); 41 app.controller("myctrl",function($scope,$http){ 42 $http.post("http://localhost/tkphp/index.php/home/index/data").success(function (res) { 43 $scope.items = res; 44 }) 45 }); 46 </script> 47 </html> 48 49 <?php 50 namespace Home\Controller; 51 use Think\Controller; 52 class IndexController extends Controller { 53 54 public function data(){ 55 $model = M("newitems"); 56 $data = $model->select(); 57 $this->ajaxReturn($data); 58 } 59 60 } 61 ?> 62 63 /* 64 输出json 65 66 [{"id":"1","name":"\u6c83\u7279\u7bee\u7403\u978b","city":"\u4f5b\u5c71","price":"180","number":"500","picture":"001.jpg"},{"id":"2","name":"\u5b89\u8e0f\u8fd0\u52a8\u978b","city":"\u798f\u5dde","price":"120","number":"800","picture":"002.jpg"},{"id":"3","name":"\u8010\u514b\u8fd0\u52a8\u978b","city":"\u5e7f\u5dde","price":"500","number":"1000","picture":"003.jpg"},{"id":"4","name":"\u963f\u8fea\u8fbe\u65afT\u8840\u886b","city":"\u4e0a\u6d77","price":"388","number":"600","picture":"004.jpg"},{"id":"5","name":"\u674e\u5b81\u6587\u5316\u886b","city":"\u5e7f\u5dde","price":"180","number":"900","picture":"005.jpg"},{"id":"6","name":"\u5c0f\u7c733","city":"\u5317\u4eac","price":"1999","number":"3000","picture":"006.jpg"},{"id":"7","name":"\u5c0f\u7c732S","city":"\u5317\u4eac","price":"1299","number":"1000","picture":"007.jpg"},{"id":"8","name":"thinkpad\u7b14\u8bb0\u672c","city":"\u5317\u4eac","price":"6999","number":"500","picture":"008.jpg"},{"id":"9","name":"dell\u7b14\u8bb0\u672c","city":"\u5317\u4eac","price":"3999","number":"500","picture":"009.jpg"},{"id":"10","name":"ipad5","city":"\u5317\u4eac","price":"5999","number":"500","picture":"010.jpg"}] 67 */
以上是关于angularjs--ajax的主要内容，如果未能解决你的问题，请参考以下文章
在 MVC VIEW 中使用 AngularJS/AJAX 呈现后端数据