AngularJS 发送POST请求到后台
来源:互联网 发布:php运费模板源码 编辑:程序博客网 时间:2024/06/06 15:20
这两个周公司要换前端框架,采用Ionic + AngularJS来展示App 原来的App采用的是H5做的,说是H5用户体验不怎么好,所以叫我调研下,说真的,刚开始真的是一脸懵逼,找各种资料,论坛,视频,看了很多博客 很多大牛都说学习Ionic必须得有AngularJS的基础,否则难以入手。事实也证明,还真的要有AngularJS的基础,所以要是有道友想学习用Ionic做移动端的话,得打好AngularJS的基础,好了,下面进入正题。
用Ionic跟后台交互,后端语言可以用PHP、Java等,跟语言没多大关系,熟悉用哪门语言就用哪种语言开发,首先你得把页面进行衔接起来,然后再想着怎么传递数据到后台,就比如你的html或jsp总得让它页面之间进行跳转吧,在AngularJS中,所有的这种跳转都是有路由来进行控制的,但是不能进行页面嵌套,所以就有了ui-router这个东西,当然 AngularJS2版本的已经改进了许多,在做测试的时候就用了登录这个进行测试,想真正的把我的用户名和密码从数据库进行匹配,却发现,提交数据的时候,请求是到了后台地址,但是确是个JSON格式 例如:
[ { key1:value1, key2:value2 }, { key3:value3, key4:value4 }]
这种形式传入的后台,后来在博客中看到一位前辈说的 是因为Angular的默认请求头就是$httpProvider.defaults.headers.post: (header defaults for POST requests)
Content-Type: application/json
$httpProvider.defaults.headers.put(header defaults for PUT requests)
Content-Type: application/json
这个是angularjs中的源码:app.config(function($httpProvider){
$httpProvider.defaults.headers.put['Content-Type'] = 'application/x-www-form-urlencoded';
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
});
就是因为这个默认的请求头post不像ajax那样传入的,而是传入了一组json数据过去,所以只能修改他的配置:在app.js中
app.config(function($httpProvider) { $httpProvider.defaults.headers.put['Content-Type'] = 'application/x-www-form-urlencoded'; $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; // Override $http service's default transformRequest $httpProvider.defaults.transformRequest = [function(data) { /** * The workhorse; converts an object to x-www-form-urlencoded serialization. * @param {Object} obj * @return {String} */ var param = function(obj) { var query = ''; var name, value, fullSubName, subName, subValue, innerObj, i; for (name in obj) { value = obj[name]; if (value instanceof Array) { for (i = 0; i < value.length; ++i) { subValue = value[i]; fullSubName = name + '[' + i + ']'; innerObj = {}; innerObj[fullSubName] = subValue; query += param(innerObj) + '&'; } } else if (value instanceof Object) { for (subName in value) { subValue = value[subName]; fullSubName = name + '[' + subName + ']'; innerObj = {}; innerObj[fullSubName] = subValue; query += param(innerObj) + '&'; } } else if (value !== undefined && value !== null) { query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&'; } } return query.length ? query.substr(0, query.length - 1) : query; }; return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data; }];});这样你传入数据到后台的时候就不是一组json格式了,你的后台可以用对象来接收值了。这个问题当时也是纠结我好久,因为我后台接收的是用对象,总是无法达到
我想要的格式。通过这个就可以完美的解决掉数据传输的格式问题了。
由于本人第一次发表这种技术博文,好多内容都还不知道排版,只有逐步逐步的尝试,才回有新的收货。
- AngularJS 发送POST请求到后台
- 发送http post请求json数据到后台
- AngularJs中$http发送post或者get请求,SpringMVC后台接收不到参数值的解决办法
- angularJS post请求后台接收不到参数
- AngularJS发送异步Get/Post请求
- Java 后台模拟发送 POST GET 请求
- Java后台发送Post和get请求
- 客户端发送POST请求数据到服务器
- C#发送POST请求到WebService
- 发送post请求到https的url
- js发送请求到java后台
- java后台发送http请求(post,get)
- httpclient发送post/get请求,Java后台怎么接受
- axios发送post请求后台接受不到问题
- angularjs post请求
- AngularJs的$http发送POST请求,php无法接收Post的数据解决方案
- 后台post发送XML
- java后台post请求
- Day0823_将音乐库中的音乐在Service中异步加载, 播放音乐并设置到通知栏
- pycharm设置
- Linux USB Driver
- UVaLive 6697 (DP)
- Eclipse中写Spark代码
- AngularJS 发送POST请求到后台
- java实现简单排序算法:归并排序
- U3D 动作系统实践
- 顺序表应用3:元素位置互换之移位算法
- centos6.3 安装zabbix2.2.0
- nginx 日志格式
- buildroot学习(三)——at91sam9g45软件平台更新
- ionic官方demo解读
- 《那些年 在美国》读书笔记-2