angular js $post,$get请求传值
困扰了我好几天的问题!!!
刚开始学play框架,在向后台传值时,一直不成功!
当你用$POST传递一个参数时:
HTML:
<button ng-click=test()>测试</button>
JS:
①
$scope.test = function() {
$http({
method: 'POST',
url: '/Application/jump',
data:{name:"zby"},
}).then(function successCallback(response) {
// 请求成功执行代码
}, function errorCallback(response) {
// 请求失败执行代码
});
}
我的后台控制器方法:
public static void test(String name) {
System.out.println(name);
System.out.println(params.get("name"));
}
这样传到后台的值为NULL,NULL。
我把JS换成:
②
$scope.test = function() {
$http({
method: 'POST',
url: '/Application/test',
params: {name:"zby"},
}).then(function successCallback(response) {
// 请求成功执行代码
}, function errorCallback(response) {
// 请求失败执行代码
});
}
后台控制器方法不变。
传到后台的值为zby,zby。
同理传递多个参数也能成功,只要把JS里的params与后台控制器的test的参数改成多个就行,但是两个参数名字,个数必须一致。
还有一种方法则是把传递的值直接写入URL里,把JS改成
③
$scope.test = function() {
var name = "zby";
$http({
method: 'POST',
url: '/Application/test?name=' + name,
}).then(function successCallback(response) {
// 请求成功执行代码
}, function errorCallback(response) {
// 请求失败执行代码
});
}
后台控制器方法不变,照样能接收到后台传来的值。
接下来看看$get方法传值:
①方法传到后台的值与$post一样为NULL,NULL。
②方法传到后台的值与$post一样为zby,zby。
③方法传到后台的值与$post一样为zby,zby。
所以能看出来这三种方法$post,$get传值都一样。
接下来我们看看第四种方法
④
$scope.test = function() {
$http({
method: 'POST',
url: '/Application/test',
data: {name: "zby"},
headers:{'Content-Type': 'application/x-www-form-urlencoded'},
transformRequest: function(obj) {
var str = [];
for(var p in obj) {
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
}
return str.join("&");
}
}).then(function successCallback(response) {
// 请求成功执行代码
}, function errorCallback(response) {
// 请求失败执行代码
});
}
后台控制器方法不变,传递到后台的值为zby,zby。
那么我们看看这种方法GET请求行不行,将JS里的method改为method: 'GET',传递到后台的值为NULL,NULL。
$get请求并不能用这种方法传递,而$post确可以。这是为什么呢?
来看看这四种方法的request请求到底发了啥数据过来
第①种:
$post
$get
第②种:
$post
$get
第③种:
$post
$get
第④种:
$post:
$get:
通过测试可知,
在第②种方法与第③种方法中,$post与$get请求都能够向后台传值,并且通过图的比较可知都是通过Query String Parameters传值
在第①种方法中,$post与$get请求不能向后台传值,但是$post请求的图中多出了
在第④种方法中,$get请求不能向后台传值,而$post请求能向后台传值,并且第①种与第④种的区别在于第④种方法添加了如下代码:
headers:{'Content-Type': 'application/x-www-form-urlencoded'},
transformRequest: function(obj) {
var str = [];
for(var p in obj) {
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
}
return str.join("&");
}
为什么加了这段代码$post请求就可以传值成功了呢?
我们看看两种的区别:
①:
④:
可以发现AngularJs用post 提交数据 以 json 格式提交的,而平时我们jquery post 提交数据是以 form-data 的形式提交的,只有把它转化为form-data形式后台才能接收到。
解决方法就是:改AngularJs 提交数据的方式,配置 header 值,使用 transformRequest对提交数据进行序列化,把 json 对象更改为字符串。
angular js $post,$get请求传值的更多相关文章
- angular开发中对请求数据层的封装
代码地址如下:http://www.demodashi.com/demo/11481.html 一.本章节仅仅是对angular4项目开发中数据请求封装到model中 仅仅是在项目angular4项目 ...
- angular-使用iframe做独立页(iframe传值到angular和iframe里请求后台数据)
这个方法使用过两次.一次是在项目中嵌入一个表达式生成器.因为用别人做好的网页变成组件很难,而且里面用了jq,与angular思想相反不能用.另一次是因为想要单独引用样式.而innerHTML使用的样式 ...
- Angular.JS
AngularJS是什么? 完全使用 JavaScript编写的客户端技术.同其他历史悠久的 Web技术( HTML. CSS 和JavaScript)配合使用,使Web应用开发比以往更简单.更快捷. ...
- 如何在Angular优雅编写HTTP请求
原文:https://segmentfault.com/a/1190000010570799 ----------------------------------------------------- ...
- axios中请求传值方式
日常开发中与后端联调,可能需要的数据不同,所传值也有所不同 1.如果是data方式,设置请求头为:并且直接返回data就可以 raw axios.defaults.headers['Content- ...
- angular中a标签带请求头下载excel
<!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta ...
- 带你了解 Angular 与 Angular JS
Angular 是一个基于 TypeScript 的开源客户端框架,专为构建 Web 应用程序而设计. 另一方面,AngularJS 是 Angular 的第一个版本,用纯 JavaScript 编写 ...
- 数据的双向绑定 Angular JS
接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...
- 常见的几个angular.js的问题
来源于网络收集 一.ng-show/ng-hide 与 ng-if的区别? 我们都知道ng-show/ng-hide实际上是通过display来进行隐藏和显示的.而ng-if实际上控制dom节点的增删 ...
随机推荐
- 前端Web开发MVC模式-入门示例
MVC概论起初来之桌面应用开发.其实java的structs框架最能体现MVC框架:model模型是理解成服务器端的模块程序:view为发送给客服端的内容:control为servlet程序控制跳转和 ...
- BZOJ:4869: [Shoi2017]相逢是问候
4869: [Shoi2017]相逢是问候 先说点正经的…… 显然做了有限次(我只知道是有限次,而且不会大,别人说是log次?)修改以后会达到不动点,即以后怎么修改都不变了. 然后就随便做了.(3个l ...
- POJ 1804 Brainman(5种解法,好题,【暴力】,【归并排序】,【线段树单点更新】,【树状数组】,【平衡树】)
Brainman Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 10575 Accepted: 5489 Descrip ...
- 洛谷 P1019 单词接龙【经典DFS,温习搜索】
P1019 单词接龙 题目描述 单词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已知一组单词,且给定一个开头的字母,要求出以这个字母开头的最长的“龙”(每个单词都最多在“龙”中出现两次),在 ...
- 解决php的sha1和java的sha1(DigestUtils.sha1Hex)产生的字符串不相等的问题
最近对接某个第三方服务,其中对接某些api需要用到他们的签名回调,根据他们传来的get参数和apiSecret进行拼接并使用sha1加密,然后返回弄成jsonp的格式返回,出于菜鸟的本能,首先是下载了 ...
- ubantu下su命令Authentication failure失败的解决方式
Ubuntu安装后,root用户默认是被锁定了的,不允许登录,也不允许 su 到 root . 可以使用: sudo passwd 来重新设置root密码,后即可登陆root. ortonwu@ubu ...
- Angular 选项卡
<div ng-init="now=0;" class="nav"> <h4>选项卡</h4> <div > & ...
- EC+VO+SCOPE for ES3
词法环境 词法作用域 词法作用域(lexcical scope).即JavaScript变量的作用域是在定义时决定而不是执行时决定,也就是说词法作用域取决于源码. 词法环境 用于定义特定变量和函数标识 ...
- PHP条件语句if的使用
方法/步骤 if(条件){是否执行的代码...}:这样的用法常用于判断单一条件,当然,可以可以用逻辑符号将多个条件组合成同一条件. if else语句:如果条件不成立,就会执行else后面{}里的代码 ...
- ffmpeg批量实现视频转码命令行
ffmpeg实现视频转码命令行,result需要提前建好作为保存转码后的视频路径: ffmpeg -i .mp4 -vcodec h264 "result\1.mp4" 当有大量视 ...