angularjs的$http请求方式
2018-07-28 06:27:48来源:博客园 阅读 ()
/*$http常用的几个参数 $http服务的设置对象: 1、method 字符串 表示发送的请求类型 get post jsonp等等 2、url 字符串 绝对或者相对的URL,请求的目标 3、params 字符串或对象 会被转化成查询字符串加到URL后面,如果不是字符串会被JSON序列化 4、data 字符串或者对象 这个对象包含了被当做消息体发送给服务器的数据,一般在POST请求中使用,并且从angular1.3开始可以在POST请求里发送二进制数据 如var blob = new Blob({name:’张三’}); $http({method:’get’,url:’/‘,data:blob}); 5、headers 对象 在我们做POST跨域和后台配合的时候就用到了headers,其代表随请求发送的HTTP头字符串 6、cache 布尔或缓存对象 如果设置为true angularjs会用默认的$http缓存对GET请求进行缓存 7、timout 数值或者promise对象,如果为数值那么请求会在指定的毫秒后结束(会跳到失败的error方法里) ,如果为对象那么promise对象在被resolve时请求会被中止,方法执行完毕再执行请求 8、xsrfHeaderName 字符串 保存XSFR令牌的HTTP头的名称 9、xsrfCookieName 字符串 保存XSFR令牌的cookie的名称 10、transformRequest 函数或函数组 用来对HTTP请求头和体信息进行转换,并返回转化后的版本,通常用于在请求发送给服务器之前对其序列化 11、transformResponse 函数或函数组 用来HTTP响应头和响应体信息进行转换,并返回转化后的版本,通常用来反序列化 12、responseType 字符串 该选项会在请求中设置XMLHttpResponseType属性有以下类型: “”字符串默认,”arraybuffer”(arraybuffer),”blob”(blob对象),“document”(HTTP文档),”json“(从JSON对象解析出来的json字符串),”text“(字符串),”moz-blob“(Firefox的接收进度事件),”moz-chunked-text“(文本流),”moz-chunked-arraybuffer”(arraybuffer流) $http服务的快捷方法 $http提供了一些快捷方法让我们使用,一共有六个(其实是六种请求模式) 1、$http.get(url字符串,config可选的配置-对象类型) 返回HttpPromise对象 2、$http.delete(url字符串,config可选的配置-对象类型) 返回HttpPromise对象 3、$http.head(url字符串,config可选的配置-对象类型) 返回HttpPromise对象 4、$http.jsonp(url字符串,config可选的配置-对象类型) 返回HttpPromise对象 5、$http.post(url字符串,data对象或字符串,config可选的配置-对象类型) 返回HttpPromise对象 6、$http.put(url字符串,data对象或字符串,config可选的配置-对象类型) 返回HttpPromise对象 */
// 1、$http请求方式 /** * 请求参数说明: *url:url, //请求的url路径 *method:method, //GET/DELETE/HEAD/JSONP/POST/PUT *params:params , //转为 ?param1=xx1?m2=xx2的形式 *data: data //包含了将被当做消息体发送给服务器的数据,通常在POST请求时使用 */ $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){ //成功处理 // response --- 响应体,即:要请求的数据 // status --- HTTP状态码 // header --- 头信息 // config --- 用来生成原始请求的完整设置对象 // statusText --- 相应的HTTP状态文本 }).error(function(data,header,config,status){ //错误处理 });
// 2、GET方式 // $http---get请求方式--- params参数会转为 ?param1=xx1?m2=xx2的形式 $http({ url:"/doc.json", method:'GET', params:{ 'username':'admin' } }).success(function (response, status, headers, config) { /*成功信息*/ }).error(function (response) { /*失败信息*/ }); //快捷请求: $http.get(url, [config]) .success(function(data){}) .error(function(data){});
// 3、POST方式 $http({method : 'POST',params : { id:1}, data:{name:'admin',age:1}, url : "/doc"}) .success(function(response, status, headers, config){ /*成功信息*/ }) .error(function(response, status, headers, config){ /*失败信息*/ }); // 快捷方式: $http.post(url, $scope.formData).success(function (response, status, headers, config) { /*成功信息*/ }).error(function (response) { /*失败信息*/ });
// 4、发送jsonp请求: // 为了发送JSONP请求,url中必须包含JSON_CALLBACK参数, jsonp(url,config) 其中config是可选的 // eg: var promise=$http.jsonp("/api/users.json?callback=JSON_CALLBACK");
// 5、$http提交表单 --- 与Spring MVC交互, 使用这种方式 // 通用方式: $http({ method: "POST", url: url, headers: {'Content-Type': 'application/x-www-form-urlencoded'}, data: $.param($scope.request) }).success(function(result){ }).error(function(result){ }); // 快捷方式: $http.post(url, $scope.formData) .success(function(result){ }) .error(function(result){ });
// 6、使用$http指定的方法发送HTTP请求: get(url, [config]); delete(url, [config]); post(url, data, [config]); put(url, data, [config]);
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:js练习——图片切换
- 浅析XMLHttpRequest的缓存问题 2020-02-25
- AngularJS实现标签页的两种方式 2019-12-29
- 详解AngularJS 实现JavaScript 动画效果 2019-11-12
- HTTP状态码汇总 2019-08-14
- element-ui table 默认全选 2019-08-14
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash