6.$http服务
2017-05-27 本文已影响0人
miner敏儿
1.把文件夹，创建在服务器的目录当中。
2.在浏览器当中，查看文件
http://localhost/day5-code/
3.到phpstorm当中，进行配置 setting ->deployment
4.点击绿色添加，把文件地址，贴入进去。
Ajax的基本原理复习
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
设置在浏览器中运行可以直接跳到本机127.0.0.1 或者 location
setting->deployment-> + name:php 随便写->选择Local or menthed
-->
<script>
/* 向服务器要数据*/
var xhr = new XMLHttpRequest();
/*想哪个服务器要请求*/
xhr.open("get",'zm.php');
/*开始要数据*/
xhr.send();
/*监听服务器有没有把数据给我*/
xhr.onreadystatechange = function () {
/*收到了服务器给的数据*/
if(xhr.readyState == 4 && xhr.status ==200){
/*responseText 就是服务器给的数据*/
console.log(xhr.responseText);
}
};
</script>
</body>
</html>
image.png
$http服务
$http服务-get请求
没有传递参数的情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src=angular.js></script>
<script>
/*1.创建模块*/
var app = angular.module('app',[]);
/*2.创建控制器*/
app.controller("zmController",["$scope","$http",function($scope,$http){
//以前都是我自己传入数据.现在我从数据库中传入
// $scope.res="zm";
$http({
url:'zm.php',/*请求地址*/
method:'get',/*请求类型*/
}).success(function (res) /*res是请求地址中的内容*/ {/*请求成功时,回调*/
$scope.res=res;
}).error(function (error){
console.log(error);
})
}])
/*3.绑定模板*/
/*4.绑定控制器*/
</script>
<body ng-app='app' ng-controller='zmController'>
<p>{{res}}</p>
</body>
</html>
image.png
get的查询方式的传参方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src=angular.js></script>
<script>
/*1.创建模块*/
var app = angular.module('app',[]);
/*2.创建控制器*/
app.controller("zmController",["$scope","$http",function($scope,$http){
$http({
url: 'get.php', /*请求地址*/
method: 'get', /*q请求类型*/
params: {
flag: 'zm' /*一定要与服务器那边的值相同和相等*/
}
}).success(function (res) {/*请求成功时,回调*/
$scope.res = res; //拿到服务器的数据
}).error(function(error){/*请求失败时,回调*/
console.log(error);
})
}])
/*3.绑定模板*/
/*4.绑定控制器*/
</script>
<body ng-app='app' ng-controller='zmController'>
<p>{{res}}</p>
</body>
</html>
image.png
1.url: 'get.php?flag=zm',
2.params: {
flag: 'zm' /*一定要与服务器那 边的值相同和相等*/
}
$http服务-post请求
post必须得要设置请求头
headers: {'Content-Type':'application/x-www-form-urlencoded' }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src=angular.js></script>
<script>
/*1.创建模块*/
var app = angular.module('app',[]);
/*2.创建控制器*/
app.controller("zmController",["$scope","$http",function($scope,$http){
$http({
url: 'post.php', /*请求地址*/
method: 'post', /*请求类型*/
headers: {/*
post必须得要设置请求头
默认,不加请求头,是以json Content-Type:application/json;
charset=UTF-8
以php为例,post是接收不到json的,所以就会发生错误 {}形式
post接收的是formData 是key:value形式
*/
'Content-Type':'application/x-www-form-urlencoded' },
// data:{
/// *默认是以json形式传递.*/
// flag: 'zm' /*一定要与服务器那边的值相同和相等*/
// }
data:'flag=zm'
}).success(function (res) {/*请求成功时,回调*/
$scope.res = res;
}).error(function(error){/*请求失败时,回调*/
console.log(error);
})
}])
/*3.绑定模板*/
/*4.绑定控制器*/
</script>
<body ng-app='app' ng-controller='zmController'>
<p>{{res}}</p>
</body>
</html>
image.png
$http服务-get请求的一个小demo
系统给出的是一个json文件,要使用此文件首先需要转化成php文件格式
image.png
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src=angular.js></script>
<script>
/*1.创建模块*/
var app = angular.module('app',[]);
/*2.创建控制器*/
app.controller("zmController",["$scope",'$http',function($scope,$http){
$http({
url:'students.php',
method:'get',
params:{
flag:'zm'
}
}).success(function(res){
$scope.students=res;
//接受服务器的值
}).error(function(error){
console.log(error);
})
}])
/*3.绑定模板*/
/*4.绑定控制器*/
</script>
<body ng-app='app' ng-controller='zmController'>
<ul>
<li ng-repeat='student in students'> //遍历服务器的值
{{student.name}}:{{student.address}}:{{student.age}}
</li>
</ul>
</body>
</html>
image.png
