前端讲义72_AngularJS服务$http应用演示

最新推荐文章于 2024-04-22 01:28:25 发布

木生火

最新推荐文章于 2024-04-22 01:28:25 发布

阅读量148

点赞数

CC 4.0 BY-SA版权

分类专栏： Angular

本文链接：https://blog.youkuaiyun.com/msh2016/article/details/91358904

Angular 专栏收录该内容

19 篇文章

订阅专栏

本案例展示了如何在AngularJS中利用$http服务进行异步数据请求。具体步骤包括在文本框输入博主名称，选择专栏，通过POST方法将序列化后的参数发送到服务器，并根据服务器响应更新界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本案例演示$http服务功能：

1，文本框内输入博主名称 2，然后选择博主专栏 3，传递给远程服务处理，4服务器返回处理结果，界面如下：

HTML模板部分

<div ng-app="mshApp"  ng-controller="mshCtr">
<form id="userForm">
	优快云博主:<input type="text" name="user" ng-model="params.user"/><br />
	专栏列表:<p>
    	<select multiple="multiple" name="books" ng-model="params.books">
		<option value="jVS.NET">VS.NET入门讲义</option>
		<option value="Linux">Linux入职基础</option>
		<option value="Oracle">Oracle入门精读</option>
		<option value="Angular">AngularJS讲义</option>
	</select>
	<br />
	<input id="load" type="button" value="异步请求数据" ng-click="send();"/>
</form><hr />
<div ng-bind-html="show"></div>
</div>

控制器处理代码

<script >
var app=angular.module("mshApp", ['ngSanitize']);
app.controller('mshCtr',  fn1);
function fn1($scope, $http, $httpParamSerializer){        
		$scope.send = function(){
			// 配置$http服务
			var reqConfig ={
				method: 'POST',
				url: 'title',
				// 请求参数序列化
				data: $httpParamSerializer($scope.params), 
				//请求Content-Type
				headers: {'Content-Type': 'application/x-www-form-urlencoded'}
			}
			// 调用$http服务
			var promise=$http(reqConfig);
			promise.then(successCall,errorCall);
			// 服务器响应成功后的数据处理函数
			function successCall(response){
				$scope.show = "服务器响应成功：" + response.status  + "<p><br/>"+ response.data;
			};
			//服务器响应失败后的数据处理函数
			function errorCall(response){
				$scope.show = '服务器响应异常';
			};
			
			console.log($scope.params);
			
		};
		
};
</script>

远程服务器代码（稍等部署Tomcat,测试后再给出）