1.把文件夾，創(chuàng)建在服務(wù)器的目錄當(dāng)中。
2.在瀏覽器當(dāng)中暇榴，查看文件
http://localhost/day5-code/
3.到phpstorm當(dāng)中，進(jìn)行配置 setting ->deployment
4.點(diǎn)擊綠色添加蕉世，把文件地址跺撼，貼入進(jìn)去。
Ajax的基本原理復(fù)習(xí)
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
設(shè)置在瀏覽器中運(yùn)行可以直接跳到本機(jī)127.0.0.1 或者 location
setting->deployment-> + name:php 隨便寫->選擇Local or menthed
-->
<script>
/* 向服務(wù)器要數(shù)據(jù)*/
var xhr = new XMLHttpRequest();
/*想哪個服務(wù)器要請求*/
xhr.open("get",'zm.php');
/*開始要數(shù)據(jù)*/
xhr.send();
/*監(jiān)聽服務(wù)器有沒有把數(shù)據(jù)給我*/
xhr.onreadystatechange = function () {
/*收到了服務(wù)器給的數(shù)據(jù)*/
if(xhr.readyState == 4 && xhr.status ==200){
/*responseText 就是服務(wù)器給的數(shù)據(jù)*/
console.log(xhr.responseText);
}
};
</script>
</body>
</html>
image.png
$http服務(wù)
$http服務(wù)-get請求
沒有傳遞參數(shù)的情況
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src=angular.js></script>
<script>
/*1.創(chuàng)建模塊*/
var app = angular.module('app',[]);
/*2.創(chuàng)建控制器*/
app.controller("zmController",["$scope","$http",function($scope,$http){
//以前都是我自己傳入數(shù)據(jù).現(xiàn)在我從數(shù)據(jù)庫中傳入
// $scope.res="zm";
$http({
url:'zm.php',/*請求地址*/
method:'get',/*請求類型*/
}).success(function (res) /*res是請求地址中的內(nèi)容*/ {/*請求成功時,回調(diào)*/
$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.創(chuàng)建模塊*/
var app = angular.module('app',[]);
/*2.創(chuàng)建控制器*/
app.controller("zmController",["$scope","$http",function($scope,$http){
$http({
url: 'get.php', /*請求地址*/
method: 'get', /*q請求類型*/
params: {
flag: 'zm' /*一定要與服務(wù)器那邊的值相同和相等*/
}
}).success(function (res) {/*請求成功時,回調(diào)*/
$scope.res = res; //拿到服務(wù)器的數(shù)據(jù)
}).error(function(error){/*請求失敗時,回調(diào)*/
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' /*一定要與服務(wù)器那 邊的值相同和相等*/
}
$http服務(wù)-post請求
post必須得要設(shè)置請求頭
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.創(chuàng)建模塊*/
var app = angular.module('app',[]);
/*2.創(chuàng)建控制器*/
app.controller("zmController",["$scope","$http",function($scope,$http){
$http({
url: 'post.php', /*請求地址*/
method: 'post', /*請求類型*/
headers: {/*
post必須得要設(shè)置請求頭
默認(rèn),不加請求頭,是以json Content-Type:application/json;
charset=UTF-8
以php為例,post是接收不到j(luò)son的,所以就會發(fā)生錯誤 {}形式
post接收的是formData 是key:value形式
*/
'Content-Type':'application/x-www-form-urlencoded' },
// data:{
/// *默認(rèn)是以json形式傳遞.*/
// flag: 'zm' /*一定要與服務(wù)器那邊的值相同和相等*/
// }
data:'flag=zm'
}).success(function (res) {/*請求成功時,回調(diào)*/
$scope.res = res;
}).error(function(error){/*請求失敗時,回調(diào)*/
console.log(error);
})
}])
/*3.綁定模板*/
/*4.綁定控制器*/
</script>
<body ng-app='app' ng-controller='zmController'>
<p>{{res}}</p>
</body>
</html>
image.png
$http服務(wù)-get請求的一個小demo
系統(tǒng)給出的是一個json文件,要使用此文件首先需要轉(zhuǎn)化成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.創(chuàng)建模塊*/
var app = angular.module('app',[]);
/*2.創(chuàng)建控制器*/
app.controller("zmController",["$scope",'$http',function($scope,$http){
$http({
url:'students.php',
method:'get',
params:{
flag:'zm'
}
}).success(function(res){
$scope.students=res;
//接受服務(wù)器的值
}).error(function(error){
console.log(error);
})
}])
/*3.綁定模板*/
/*4.綁定控制器*/
</script>
<body ng-app='app' ng-controller='zmController'>
<ul>
<li ng-repeat='student in students'> //遍歷服務(wù)器的值
{{student.name}}:{{student.address}}:{{student.age}}
</li>
</ul>
</body>
</html>
image.png
