AngularJS免不了和web服务端交互,贴一段代码
$rootScope.ajaxRequestPost = function (requestUrl, data, successCallback) {
var transFn = function (data) {
return $.param(data);
};
var postCfg = {
headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
transformRequest: transFn
};
$http.post(requestUrl, data, postCfg).success(function (resultJson) {
if (resultJson.success) {
//回调业务
successCallback(resultJson);
}
}).error(function (e) {
console.log('系统异常');
});
};
注意,在使用$http 提交请求时,配置了postCfg,其内部用了jquery.param方法,贴一段w3school上对该方法的说明:
param() 方法创建数组或对象的序列化表示。该序列化值可在进行 AJAX 请求时在 URL 查询字符串中使用
注意到,如果提交的参数就是简单的表单,一切OK。例如常用的SpringMVC举例
比如
class A{
String xx;
}
public CommonResult update(HttpServletRequest request,HttpServletResponse response, @ModelAttribute A a) {
}
但是一旦A变成了复杂对象,其Jquery特有的序列化方式,将后导致后端处理时的异常:
class A{
B b;
}
class B{
String xx;
}
这时候该怎么办呢,解决方案如下:
1 修改post方法,采用angularJS默认方法: $http.post(requestUrl, data)
2 修改后端方法,采用@RequestBody
public CommonResult update(HttpServletRequest request,HttpServletResponse response, @RequestBody A a) {
}
实际上的不同就是,前者提交时,任是以key-value的形式提交;而后者提交时,直接将A的json串放在了body中了
至于ModelAttribute 和 RequestBody 注解有什么不同,百度一下
- 大小: 72.3 KB
分享到:
相关推荐
默认情况下,POST请求通常用于向服务器发送数据,但其默认行为可能不完全符合我们的需求,例如在处理API兼容性或跨域请求时。 2. **配置请求头** 在进行POST提交时,我们可能需要添加自定义的请求头,如`Content-...
本文实例讲述了Angularjs中$http以post请求通过消息体传递参数的方法。分享给大家供大家参考,具体如下: Angularjs中,$http以post在消息体中传递参数,需要做以下修改,以确保消息体传递参数的正确性。 一、在声明...
1、在页面中加入AngularJS并为页面绑定ng-app 和 ng-controller <body ng-app="MyApp" ng-controller="MyCtrl" > ... [removed][removed] [removed][removed] 2、添加必要的控件并绑定相应的事件 get:<...
在使用AngularJS与PHP进行交互时,可能会遇到一个问题:当使用AngularJS的$http服务发送POST请求时,PHP后台无法正常接收POST数据。这个问题通常源于数据格式的不匹配和HTTP头设置不当。以下是对这个问题的详细分析...
发起POST请求** 对于POST请求,可以使用`http.post()`方法。例如,发送一个JSON对象到服务器: ```typescript const data = { name: 'John', age: 30 }; this.http.post('https://api.example.com/user', JSON....
总结来说,通过本文的介绍,我们可以了解到AngularJS中$http模块的POST请求实现的具体方法,包括基本的请求和响应处理、配置请求头和数据转换、以及如何在实际应用中运用$http模块。掌握这些知识对于开发AngularJS...
在使用AngularJS与PHP进行交互时,可能会遇到一个问题:当AngularJS通过$http服务发送POST请求时,PHP后台无法正确接收并解析发送的数据。这个问题主要源于AngularJS与PHP处理POST数据方式的不同。 首先,jQuery的$...
当需要发起POST请求时,除了设置`Access-Control-Allow-Origin`,还需要设置`Access-Control-Allow-Methods`和`Access-Control-Allow-Headers`。例如,服务器端需要允许POST请求和特定的请求头: ```java ...
Promise提供了链式调用的接口,允许你在数据请求完成后执行一系列后续操作,如处理响应数据、错误处理等。 此外,你可能会学习到服务(Service)的概念。在AngularJS中,服务是一种可重用的组件,可以封装业务逻辑...
它支持多种HTTP请求类型(GET、POST、PUT、DELETE等),并且提供了灵活的方式来配置这些请求。本文将详细介绍AngularJS中通过$http发起GET请求的不同方法,特别是当参数较少或较多时的不同实现策略。 #### 一、参数...
这里定义了一个名为get_more的函数,该函数在被触发时,将通过$http对象发起一个POST请求到指定的PHP脚本。在请求中,可以指定请求的方法(method)、请求的URL(url)以及需要发送的数据(data)。$http的调用返回...
AngularJS发起$http.post请求 代码如下: $http({ method:'post', url:'post.php', data:{name:"aaa",id:1,age:20} }).success(function(req){ console.log(req); }) 这时候你会发现收不到返回的数据,结果为...
AngularJS封装$http.post()实例详解 用了不是很长的时间跟了一个移动APP项目,用的是ionic + AngularJS + cordova框架,其间遇到过挺多问题,其中一个就是对Ajax的封装问题。 其实针对封装问题一直以来就没停止过...
在上面的代码片段中,提到了一个问题:在使用AngularJS发送POST请求时,传递JSON数据到服务端却无法正确接收。这种情况很常见,通常和请求头(header)的设置,以及数据格式的转换有关。在使用$http.post方法时,...
AngularJS是一个广泛使用的前端JavaScript框架,它用于构建SPA(单页面应用)。这篇文章详细介绍了如何使用AngularJS构建一个简易型的权限管理系统。我们将通过多个知识点来展开讨论这一主题。 首先,要了解什么是...
1. **创建(Create)**:在AngularJS中,创建新记录通常涉及到向服务器发送POST请求。这可以通过AngularJS的$http服务或者使用ngResource模块来实现。ngResource提供了一个资源对象,可以方便地执行CRUD操作。你需要...
4. **服务器端处理**:在服务器端,你需要接收这个POST请求,并将图片保存到指定的目录或数据库。具体实现取决于你使用的后端技术,如Node.js的Express框架、PHP的Laravel或Python的Django等。 5. **成功反馈**:...