Http网络请求数据

来源：互联网发布：电脑软件服务打不开编辑：程序博客网时间：2024/06/11 04:58

<title></title>
<script type="text/javascript" src="../../angular/angular.js" ></script>
<script>
var app = angular.module("myApp",[]);

//注入$http对象
app.controller("myCtrl",function($scope,$http){

//调用$http()请求服务器。
$http({
method:"get",//请求方式
url:"haha.json"//请求路径
}).then(function success(response){//请求成功之后的回调函数
//console.log(response.data[1].sex);
$scope.users = response.data;//获取json数据源中的数据
},function error(){//请求失败时执行的回调函数
$scope.users = null;
});

//删除用户
$scope.delete = function(index){
$scope.users.splice(index,1);
}
});

/* 1.$http服务请求服务器，获得服务器端的数据 */

</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>我的用户表</h3>
<table border="1px solide blue" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th>用户名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.sex}}</td>
<td><button ng-click="delete($index)">删除</button></td>
</tr>
</tbody>
</table>
</center>

</body>

JSON

[{"name":"张三","age":20,"sex":"男"},
{"name":"李四","age":21,"sex":"女"},
{"name":"王五","age":22,"sex":"男"},
{"name":"赵六","age":23,"sex":"女"}]

阅读全文

0 0