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
