AngularJS 服务service-系统服务$http处理ajax请求

向右看齐 2021-07-24 19:10 353阅读 0赞

服务service
    	相当于是app提供给用户使用的变量全局变量,其目的是对controller功能的扩展
    	
    	(1)在NG框架中,服务是名字,可以理解问NG下的全局变量
    	(2)不同controller可以根据注入服务的方式来实现通信
    	(3)服务有系统服务和自定义服务
    	
    	1、系统服务$http
    	(1)NG框架内直接对数据模型内置的一个用于处理网络请求(如ajax请求等)功能的服务
    	(2)系统提供的服务都是带有前缀$的,自定义的一般不写$
    	(3)通过注入使用
    		app.controller('控制器名',['$scope','$http',function($scope,$http){}])
    	
    	处理ajax请求
    	返回的内容就是json对象,不用JSON.parse()解析)
    
    		处理get有/无参请求(
    		在控制器脚本内
    
    			$http({
    				method:'GET/get',
    				url:'php后台路径?键=键值&...' 
    			}).success(function(res){
    				回调函数
    			}).error(function(err){
    				console.log(err);
    				请求错误回调函数
    			})
    
    		处理post请求
    
    			$http({
    				method:'POST/post',
    				url:'php后台路径'
    				header:{
    					'Content-type':application/x-www-form-urlencoded'
    				},
    				data:'键名=键值&键名=键值...'
    			}).success(function(res){
    				返回回调函数
    			}).error(function(err){
    				请求错误回调函数
    			})
    
    		post请求下'Content-Type'两种在NG模式下无效的写法
    			不写默认为:'Content-Type:'multipart/form-data',表示以表单的形式发送
    			'Content-Type':'application/json'
    	
    		jsonp处理跨域请求:
    		
    			myUrl = "http://localhost:8090/api/test?callback=JSON_CALLBACK";
    
    			$http.jsonp(myUrl).success(
    			　　function(data){
    			　　　　alert(data);
    			　　}
    			);
    			有参写法:
    			$http.jsonp(myUrl,{params:{
    				参数键值对,
    				callback:'JSON_CALLBACK'
    				}}).success(
    			　　function(data){
    			　　　　alert(data);
    			　　}
    			);
    			
    			1.angularJS中使用$http.jsonp函数
    			2.指定callback和回调函数名，函数名为JSON_CALLBACK时，会调用success回调函数，JSON_CALLBACK必须全为大写。
    			3.也可以指定其它回调函数，但必须是定义在window下的全局函数。
    			4.url中必须加上callback
    			5.当callback为JSON_CALLBACK时，只会调用success，即使window中有JSON_CALLBACK函数，也不会调用该函数。

代码示例:

<html ng-app='app' ng-controller='main' >
    <head>
    	<meta charset="utf-8">
    	<meta name='viewport' content='width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0'>
    	<title ng-bind='mainTitle'></title>
    
    	<script src='js/angular.js'></script>
    	<script src='js/angular.route.min.js'></script>	
    	<style>
    
    	</style>
    </head>
    <body >
    //使用指令来写原src路径信息
    	<img ng-src={ { imgSrc}} alt="">
    
    <script>
    	var app=new angular.module('app',[]);
    	app.controller('main',['$scope','$http',function($scope,$http){ 
    		$scope.mainTitle='服务';
    		
    		//get请求
    		$http({ 
    			method:'GET',
    			url:'6.php'
    			
    		}).success(function(res){ 
    			console.log(res);
    
    			$scope.imgSrc=res.src;
    		}).error(function(err){ 
    			console.log('err');
    		})
    
    		//post请求
    		$http({ 
    			method:'POST',
    			url:'6.php',
    			headers:{ 
    				//不写默认为,'Content-Type:'multipart/form-data' 表示以表单的形式发送
    				//'Content-Type':'application/json'
    				//NG模式下的必要写法
    				'Content-Type':'application/x-www-form-urlencoded'
    			},
    			data:'username=jeff&password=123456'
    		}).success(function(res){ 
    			console.log(res);
    		}).error(function(err){ 
    			console.log(err);
    		})
    
    	}])
    </script>
    </body>
    </html>