失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > Angularjs 发送请求传递参数数据

Angularjs 发送请求传递参数数据

时间:2021-11-14 08:18:29

相关推荐

Angularjs 发送请求传递参数数据

文章目录

1. AngularJs 的http请求2. 常见的几种请求方式3. AngularJs 的参数传递(spring mvc接收请求)4. Angularjs post 请求参数传递使用 From data 形式

1. AngularJs 的http请求

$http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。

标准写法,使用格式:

// 简单的 GET 请求,可以改为 POST$http({method: 'GET',url: '/someUrl'}).then(function successCallback(response) {// 请求成功执行代码}, function errorCallback(response) {// 请求失败执行代码});//或者 直接写 success ,在success 中写响应成功的代码$http({method: "POST",url: "../brand/delete.do",data: {ids: $scope.ids}}).success(function (response) {// 请求成功执行代码});

简单写法

POST 与 GET 简写方法格式:

$http.get('/someUrl?username=zhangsan&password=pw', config).then(successCallback, errorCallback);$http.post('/someUrl', data, config).then(successCallback, errorCallback);//还有一些别的$http.get$http.head$http.post$http.put$http.delete$http.jsonp$http.patch

参考:AngularJS XMLHttpRequest

2. 常见的几种请求方式

HTTP 请求报文格式

GET的参数都会放在URL的后面,一般称之为query参数。

POST的都放在HTTP的报文BODY里。

From data 格式

request Header中的ContentType为 Content-Type: application/x-www-form-urlencoded

并且请求正文是类似 get 请求 url 的请求参数

Request Payload格式

request Header中的ContentType为 Content-Type:application/json;charset=UTF-8

请求正文是一个 json 格式的字符串

multipart格式

request Header中的ContentType为 ContentType: multipart/form-data;boundary=–xxxxxxx, 注意对multipart的格式都要有boundary做为BODY中的参数分隔符

对于multipart格式,需要使用流方式边收边解析,因为有可能是大文件上传。

参考:Request Payload

3. AngularJs 的参数传递(spring mvc接收请求)

对于 Form Data 请求,无需任何注解,springmvc 会自动使用 MessageConverter 将请求参数解析到对应的 bean,且通过 request.getParameter(…) 能获取请求参数对于 Request Payload 请求, 必须加 @RequestBody 才能将请求正文解析到对应的 bean 中,且只能通过 request.getReader() 来获取请求正文内容

参考: http协议的Request Payload 和 Form Data 的区别 简单写法 get 请求

$http.get("../brand/findOne.do?id="+id).success(function(response){ // 请求成功执行代码}

接收参数方式:

@RequestParam

A) 常用来处理简单类型的绑定,通过Request.getParameter() 获取的String可直接转换为简单类型的情况( String–> 简单类型的转换操作由ConversionService配置的转换器来完成);因为使用request.getParameter()方式获取参数,所以可以处理get 方式中queryString的值,也可以处理post方式中 body data的值;

B)用来处理Content-Type: 为 application/x-www-form-urlencoded编码的内容,提交方式GET、POST;

C) 该注解有两个属性: value、required; value用来指定要传入值的id名称,required用来指示参数是否必须绑定;

/*** 查询一个品牌信息* @param id 品牌id* @return*/@RequestMapping("/findOne")public TbBrand findOne(@RequestParam long id){return service.findOne(id);}参数名不一致,@RequestParam(value="xx") long id

简单写法 post 请求

$http.post("../brand/ethodName.do",$scope.entity).success(function(response){// 请求成功执行代码 )其中的 $scope.entity 就是要提交的数据

接收参数的方式:

@RequestBody

该注解常用来处理Content-Type: 不是application/x-www-form-urlencoded编码的内容,例如application/json, application/xml等;

它是通过使用HandlerAdapter 配置的HttpMessageConverters来解析post data body,然后绑定到相应的bean上的。

因为配置有FormHttpMessageConverter,所以也可以用来处理 application/x-www-form-urlencoded的内容,处理完的结果放在一个MultiValueMap<String, String>里,这种情况在某些特殊需求下使用,详情查看FormHttpMessageConverter api;

/*** 更新一个品牌信息* @param brand 品牌* @return*/@RequestMapping("/update")public Result update(@RequestBody TbBrand brand){//代码}

可以直接封装成对象,当前也可以封装为数组,集合什么的。

标准格式的 get 请求

$http({method: "GET",url: "../brand/findOne.do",params: {id: id}}).success(function(){//请求成功});

当你这样写的时候它会把id写到url后面

params这个参数是用在GET请求中的,而POST/PUT/PATCH就需要使用data来传递;

在后台接收的方式 ,使用@RequestParam 即可。

标准格式的 post 请求

$http({method: "POST",url: "../brand/delete-reqpayload.do",data: {ids: $scope.ids}}).success(function (response) {// 请求成功执行代码});

这样传递参数,跟简单post请求一样,参数都存放到了Request Payload。

后台需要使用 @RequestBody 接收参数

@RequestMapping("/delete-reqpayload")public Result delete_reqplayload(@RequestBody Ids ids){System.out.printf("ids"+ids.toString());}

参考:@RequestParam @RequestBody @PathVariable 等参数绑定注解详解

4. Angularjs post 请求参数传递使用 From data 形式

如果想在后台使用@RequestParam 接收 Post 请求参数,需要将其参数进行序列化

代码:

$http({method: "POST",url: "../brand/delete.do",data: {ids: $scope.ids},headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, //将其变为 form-data 参数形式transformRequest: function(obj) { //序列化参数var str = [];for (var s in obj) {str.push(encodeURIComponent(s) + "=" + encodeURIComponent(obj[s]));}return str.join("&");}}).success(//请求成功});

后台接收,看你对应的数据类型是什么

@RequestMapping("/delete")public Result delete(@RequestParam Long ids[]){//代码}

参考:AngularJS $http post 传递参数数据

如果觉得《Angularjs 发送请求传递参数数据》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。