angularjs的post请求参数的转换,使之跟ajax一样参数供springMVC使用

一般情况下,angularjs的post格式是(我的模板):

angularjs的请求方式是:

  1. Content-Type: application/json

这样传过去的数据是这样子的:如传递一个数组:图中targetArr是数组



 真正的格式是json格式啊,springMVC不好接收的:



 展开来是这样的,总之就是springMVC的@RequestParam所不能接受的类型:

这种情况下,先说说正常可以行得通,不用在js转换格式的方式:用springMVC的@RequestBody去接受json数据,但是前提是,你得有一个javaBean的文件。例如,对应的数组,写成:

然后就可以接收了,一般接收常用的数据库class还是没问题的,比如一个User对象

但是,如果我要传进任何的阿猫阿狗不常用的数据呢,是不是都要这样为它们创立class类??

为了解决这个问题,还是应该转为像jquery那样的ajax传参,然后@requestParam也好用。

ajax的传参方式是这样的:

  1. Content-Type=“application/x-www-form-urlencoded"

然后一个数组的具体应该是这样的:

如果是一个对象,应该是这样的:


综上:应该在angularjs中怎么转换呢?网上查找了很多资料,没几个人说得清的,这里 牢骚一下,那些人有没有分享精神的呢?

以下这段代码是参考网上的,因为网上复制来复制去,具体也不知道原来的人是谁,感谢他吧。把他的代码拿过来修改一下下。app.config便是转换。加上在js文件便是。

  1. var app = angular.module("MyApp", []);
  2. app.config(function ($httpProvider) {
  3. $httpProvider.defaults.headers.put[‘Content-Type‘] = ‘application/x-www-form-urlencoded‘;
  4. $httpProvider.defaults.headers.post[‘Content-Type‘] = ‘application/x-www-form-urlencoded‘;
  5. // Override $http service‘s default transformRequest
  6. $httpProvider.defaults.transformRequest = [function (data) {
  7. /**
  8. * The workhorse; converts an object to x-www-form-urlencoded serialization.
  9. * @param {Object} obj
  10. * @return {String}
  11. */
  12. var param = function (obj) {
  13. var query = ‘‘;
  14. var name, value, fullSubName, subName, subValue, innerObj, i;
  15. for (name in obj) {
  16. value = obj[name];
  17. if (value instanceof Array) {
  18. for (i = 0; i < value.length; ++i) {
  19. subValue = value[i];
  20. fullSubName = name + ‘[]‘;
  21. innerObj = {};
  22. innerObj[fullSubName] = subValue;
  23. query += param(innerObj) + ‘&‘;
  24. }
  25. } else if (value instanceof Object) {
  26. for (subName in value) {
  27. subValue = value[subName];
  28. fullSubName = subName;
  29. innerObj = {};
  30. innerObj[fullSubName] = subValue;
  31. query += param(innerObj) + ‘&‘;
  32. }
  33. } else if (value !== undefined && value !== null) {
  34. query += encodeURIComponent(name) + ‘=‘
  35. + encodeURIComponent(value) + ‘&‘;
  36. }
  37. }
  38. return query.length ? query.substr(0, query.length - 1) : query;
  39. };
  40. return angular.isObject(data) && String(data) !== ‘[object File]‘
  41. ? param(data)
  42. : data;
  43. }];
  44. });

好了,有了上面的那一段,就把angularjs的post,get请求传参当jquery的那个方法进行吧。

这是js的angular的一个函数:传参的:

然后,在springMVC端接收:



 好了,在这里获取了,该干嘛就干嘛!!

来自为知笔记(Wiz)

时间: 2024-11-03 03:35:18

angularjs的post请求参数的转换,使之跟ajax一样参数供springMVC使用的相关文章

JQuery中$.ajax()方法参数详解 ASP.NET jquery ajax传递参数

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项

参数强制转换还是将参数的地址强制转换成线程参数

第一种方式:将传递的值,强制转换值的地址,然后在线程函数中,首先强制转换参数的类型,然后取值 DWORD WINAPI ThreadProc(LPVOID lpParam){ int i=(*(int*)lpParam);   //get the parameter from CreateThread function CreateThread(NULL,            NULL,      ThreadProc,      (LPVOID)i,**********      0,   

AngularJS使用OData请求ASP.NET Web API资源的思路

本篇整理AngularJS使用OData请求ASP.NET Web API资源的思路. 首先给ASP.NET Web API插上OData的翅膀,通过NuGet安装OData. 然后,给controller中需要使用OData的Action加上EnableQuery特性,并让Action方法返回IQueryable<T>类型. public class ProductsController : ApiController { // GET: api/Products [EnableQuery(

JS页面跳转使地址后面不显示参数

背景 使用window.open()和window.location.href跳转时,新页面的地址栏会显示参数,如下:http://127.0.0.1:8080/website-cms/admin/article/edit?action=add. 这样会暴露参数内容,用户可以修改地址栏的参数.如果提交的参数修改可能会出现业务上的错误,甚至可以跳过权限验证,实现本来没有的权限. 案例 以前做过一个系统是通过权限控制按钮,权限小的只能查看,权限大的可以修改.但是为了方便只使用了同一个页面通过不同的参

JQuery中$.ajax()方法参数详解

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项

ajax方法参数

jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持. 3.timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设置. 4.async: 要求为Boolean类型的参数,默

JQuery中$.ajax()方法参数详解(转载)

type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项设置为false.注意,同步请求将锁住浏览器,用户其他操作必须等 待请求完成才

jquery 中ajax的参数

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求.如果需要发送同步请求,请将此选项设置为

jQuery中$.ajax()方法参数解析

本文实例为大家讲解了jQuery $.ajax()方法参数,供大家参考,具体内容如下 $.ajax({ url:'test.do', data:{id:123,name:'xiaoming'}, type:'post', dataType:'json', success:function(data){ alert(data);//弹窗 //TODO ........ }, error:function(data){ alert(data);//弹窗 //TODO ........ } }) ur