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

服务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'

代码示例:

<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>
发布了300 篇原创文章 · 获赞 3 · 访问量 6399

猜你喜欢

转载自blog.csdn.net/weixin_43294560/article/details/104045475