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 对象更改为字符串。
转载于:https://www.cnblogs.com/zhengbiyu/p/8428083.html
angular js $post,$get请求传值相关推荐
- angluar ajax实例,Angular服务Request异步请求的实例讲解
首先这里我简单写个例子来方便您的理解 var request = { post: function() { var errorCallback = { error: function(f) { thi ...
- angular开发中对请求数据层的封装
代码地址如下: http://www.demodashi.com/demo/11481.html 一.本章节仅仅是对angular4项目开发中数据请求封装到model中 仅仅是在项目angular4项 ...
- Angular Img标签自定义请求header Authorization
Angular Img标签自定义请求header Authorization 背景 是这样的需求,有一个web页面,里面图片的上传和预览来自于一个独立的文件服务器,对http的请求需要进行访问权限的设 ...
- 【Angular中的HTTP请求】- 拦截器 HttpInterceptor 详解
通过学习 HttpClient 的工作机制 ,我们知道对于HTTP请求,HttpClient 实际上是构建了一个链式的处理流程: 在HttpBackend的处理流程中请求被发出.在HttpBacken ...
- 关于Angular使用http发送请求后的响应处理
源代码: import { Component, OnInit } from '@angular/core'; import { FormControl } from '@angular/forms' ...
- 前端框架-Angular.js
前端的功能与单页应用 就webapp开发而言,前端实现的功能主要有: -实现UI(渲染出用户可见的视图和各种功能组件) -对用户的操作(事件)做出反应 -实现业务逻辑 -实现页面路由 -与服务器端交互 ...
- 初识 angular js
创建第一个 angularjs 项目 <html ng-app> : 表名这个是angularjs 项目 双大括号标记 {{ }} 的内容是问候语中绑定的表达式 Angular 模型变量 ...
- Windows环境安装运行:Angular.js
一.下载 Node.js https://nodejs.org/en/download/ 检测版本: cmd: node -v 二.安装typescript和typings 使用 Node.js 包管 ...
- 该怎么写Angular JS
<html ng-app> <head> <title>表单</title> <script type="text/ja ...
最新文章
- centos7安装Oracle12(完整版)
- 适合手机运行的服务器系统,一台服务器能维持多久?谈谈服务器的运行寿命
- 如何搭建安卓开发持续化集成环境(Ubuntu + Jenkins + SonarQube)
- 算法学习之路|最小生成树—kruskal
- Flask-SocketIO 简单使用指南
- 太厉害了!3小时34分!53岁院士施一公完成人生首马
- linux软件包安装及自制yum源
- 过滤器链模式PK匿名方法实现,哪个更优雅?
- STM32系列单片机在进入main函数前都在干些什么?
- 在Excel的单元格中,调用VBA函数
- python自动化办公教程-Python自动化办公之操作Excel文件
- pdflush进程详解
- 模板码:个性二维码制作,改变二维码设计方式
- html5学习开发指南
- 利用简单的爬虫获取CV顶会论文
- SASE:基于数字身份标识的网络与安全访问云服务
- 高等数学(第七版)同济大学 习题10-2(中5题) 个人解答
- 消费者不好骗!2021过半,网红品牌为毛集体“玩崩”了?
- 【分享】insert出现Could not set property ‘id‘ of class XXXXXXXX
- 高通平台msm8916修改开机logo【原创】
热门文章
- 易语言操作mysql数据库
- STC89C52单片机 点亮LED灯
- Qt Creator创建项目
- shell判断false_Python中的True, False条件判断
- 最全面的Linux指令大全
- 洛谷 P2015 二叉苹果树
- ACM Smallest Difference
- loaction.reload(false)和location.reload(true) js发起请求
- MySQL 5.6 中的 TIMESTAMP 和 explicit_defaults_for_timestamp 参数
- Kinect for windows的脸部识别