AngularJS中的$http深入分析
来源:互联网 发布:房间改造软件 编辑:程序博客网 时间:2024/05/21 05:22
AngularJS中的简单请求 --- $http --- 一个类似jquery的$.ajax的对象,用于异步请求 语法: $http({ url:url, //请求的url路径 method:method, //GET/DELETE/HEAD/JSONP/POST/PUT params:params , //转为 ?param1=xx1¶m2=xx2的形式 data: data //包含了将被当做消息体发送给服务器的数据,通常在POST请求时使用 } }).success(function(response, status, header, config, statusText){ //成功处理 }).error(function(data,header,config,status){ //错误处理 }); 特别注意: 1.请求参数说明: url:url, //请求的url路径 method:method, //GET/DELETE/HEAD/JSONP/POST/PUT params:params , //转为 ?param1=xx1¶m2=xx2的形式 data: data //包含了将被当做消息体发送给服务器的数据,通常在POST请求时使用 2.响应参数说明: response --- 响应体,即:要请求的数据 status --- HTTP状态码 header --- 头信息 config --- 用来生成原始请求的完整设置对象 statusText --- 相应的HTTP状态文本 3.缓存HTTP请求 默认情况下,$http服务不会对请求进行本地缓存。在发送单独请求时,可通过向$http请求传递一个布尔参数来启用缓存 eg: $http.get({'/api/users.json',{cache:true}}) .success(function(data){ }) .error(function(data){ }) 解析: 第一次发送请求时,$http服务会向 /api/users.json发送一个GET请求, 第二次发送同一个GET请求时,$http服务会从缓存中取回请求的结果,而不会真的发送一个HTTP GET请求 设置启动缓存后,AngularJS默认会使用 $cacheFactory,这个服务在AngularJS启动时自动创建 如果想要对AngularJS使用的缓存进行更多的自定义控制,可以向请求传入一个自定义的缓存实例代替true。 1.GET方式 --- params参数会转为 ?param1=xx1¶m2=xx2的形式 1.$http请求: $http({ url:"/api/users.json", method:'GET', params:{ 'username':'jay' } } }).success(function (response, status, headers, config) { /*response -- 成功返回的数据 status -- 状态码 headers -- 头信息 config -- 其他信息 */ }).error(function (response) { } }); 2.快捷请求: $http.get(url, [config]) .success(function(data){}) .error(function(data){}); 2.POST方式 $http({method : 'POST',params : { id:123}, data:{name:'john',age:27}, url : "/mypath"}) .success(function(response, status, headers, config){ //do anything what you want; }) .error(function(response, status, headers, config){ //do anything what you want; }); 2.快捷方式: $http.post(url, $scope.formData).success(function (response, status, headers, config) { ...... }).error(function (response) { ...... }); 3.$http提交表单 --- 与Spring MVC交互, 使用这种方式 通用方式: $http({ method: "POST", url: url, headers: {'Content-Type': 'application/x-www-form-urlencoded'}, data: $.param($scope.formData) }).success(function(result){ }).error(function(result){ }); 快捷方式: $http.post(url, $scope.formData) .success(function(result){ }) .error(function(result){ }); eg: var data = { "server":$scope.server, "time":$("#time").val(), "day":day } $http({ method: "post", url: ctx+'/player/lossPlayer/list.htm', headers: {'Content-Type': 'application/x-www-form-urlencoded'}, data: $.param(data) }).success(function(result){ if(result.tip!=undefined){ //当前绑定的数据清空 $scope.players = []; alert(result.tip); }else{ console.log(result.json); $scope.players = $.parseJSON($.parseJSON(result.json).players); } }); 4.使用$http指定的方法发送HTTP请求: get(url, [config]); delete(url, [config]); post(url, data, [config]); put(url, data, [config]); 5.发送jsonp请求: 为了发送JSONP请求,url中必须包含JSON_CALLBACK参数, jsonp(url,config) 其中config是可选的 eg: var promise=$http.jsonp("/api/users.json?callback=JSON_CALLBACK");
0 0
- AngularJS中的$http深入分析
- AngularJS中的$http
- AngularJS中的 $http服务
- AngularJS中的$http
- angularjs中的$http详解
- angularJs中的http服务
- Angularjs中的$Http与$resource
- AngularJS中的交互 $http
- 深入分析Http协议
- 修改AngularJS中的$http cache中的数据
- 动手验证<<深入理解angularjs中的scope>>
- angularJS中的核心服务深入理解
- 深入了解Angularjs指令中的ngModel
- 深入理解Angularjs中的$resource服务
- AngularJS中的$http服务请求数据
- 深入分析HTTP与HTTPS
- 深入理解node中的http
- angularjs $http
- c++学习之继承篇(多重继承之虚继承)
- 汇编程序:用减奇数法开平方(16位)
- 正负数、0,个数的统计
- 三个无符号数求最大值
- 信号与系统中的傅里叶级数的意义
- AngularJS中的$http深入分析
- BusyBox - The Swiss Army Knife of Embedded Linux
- 汇编语言显示“*”符号图案(1)
- 汇编语言显示“*”符号图案(2)
- AndroidStudio打包出现"xxx" is not translated in "zh" (Chinese) [MissingTranslation]
- 缘与情历来缠缠绕绕,缘分与爱情相依并存
- 单片机考试试题
- 【Echarts】数据可视化_前端页面实现尝试
- 两个单片机编程试题答案