`
v7sky
  • 浏览: 76514 次
文章分类
社区版块
存档分类
最新评论

【AngularJS系列】记一次post请求的坑

阅读更多
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
0
0
分享到:
评论

相关推荐

    AngularJs Post提交改造

    默认情况下,POST请求通常用于向服务器发送数据,但其默认行为可能不完全符合我们的需求,例如在处理API兼容性或跨域请求时。 2. **配置请求头** 在进行POST提交时,我们可能需要添加自定义的请求头,如`Content-...

    Angularjs中$http以post请求通过消息体传递参数的实现方法

    本文实例讲述了Angularjs中$http以post请求通过消息体传递参数的方法。分享给大家供大家参考,具体如下: Angularjs中,$http以post在消息体中传递参数,需要做以下修改,以确保消息体传递参数的正确性。 一、在声明...

    AngularJS发送异步Get/Post请求方法

    1、在页面中加入AngularJS并为页面绑定ng-app 和 ng-controller <body ng-app="MyApp" ng-controller="MyCtrl" > ... [removed][removed] [removed][removed] 2、添加必要的控件并绑定相应的事件 get:<...

    AngularJs的$http发送POST请求,php无法接收Post的数据的问题及解决方案

    在使用AngularJS与PHP进行交互时,可能会遇到一个问题:当使用AngularJS的$http服务发送POST请求时,PHP后台无法正常接收POST数据。这个问题通常源于数据格式的不匹配和HTTP头设置不当。以下是对这个问题的详细分析...

    Angularjs2 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请求实现

    总结来说,通过本文的介绍,我们可以了解到AngularJS中$http模块的POST请求实现的具体方法,包括基本的请求和响应处理、配置请求头和数据转换、以及如何在实际应用中运用$http模块。掌握这些知识对于开发AngularJS...

    AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案

    在使用AngularJS与PHP进行交互时,可能会遇到一个问题:当AngularJS通过$http服务发送POST请求时,PHP后台无法正确接收并解析发送的数据。这个问题主要源于AngularJS与PHP处理POST数据方式的不同。 首先,jQuery的$...

    详解AngularJS如何实现跨域请求

    当需要发起POST请求时,除了设置`Access-Control-Allow-Origin`,还需要设置`Access-Control-Allow-Methods`和`Access-Control-Allow-Headers`。例如,服务器端需要允许POST请求和特定的请求头: ```java ...

    07angularjs4.x请求数据(上).zip

    Promise提供了链式调用的接口,允许你在数据请求完成后执行一系列后续操作,如处理响应数据、错误处理等。 此外,你可能会学习到服务(Service)的概念。在AngularJS中,服务是一种可重用的组件,可以封装业务逻辑...

    angularjs中$http请求的几种写法

    它支持多种HTTP请求类型(GET、POST、PUT、DELETE等),并且提供了灵活的方式来配置这些请求。本文将详细介绍AngularJS中通过$http发起GET请求的不同方法,特别是当参数较少或较多时的不同实现策略。 #### 一、参数...

    AngularJS实现ajax请求的方法

    这里定义了一个名为get_more的函数,该函数在被触发时,将通过$http对象发起一个POST请求到指定的PHP脚本。在请求中,可以指定请求的方法(method)、请求的URL(url)以及需要发送的数据(data)。$http的调用返回...

    angularJS 发起$http.post和$http.get请求的实现方法

    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()实例详解

    AngularJS封装$http.post()实例详解 用了不是很长的时间跟了一个移动APP项目,用的是ionic + AngularJS + cordova框架,其间遇到过挺多问题,其中一个就是对Ajax的封装问题。 其实针对封装问题一直以来就没停止过...

    深入理解Angularjs中$http.post与$.post

    在上面的代码片段中,提到了一个问题:在使用AngularJS发送POST请求时,传递JSON数据到服务端却无法正确接收。这种情况很常见,通常和请求头(header)的设置,以及数据格式的转换有关。在使用$http.post方法时,...

    如何使用AngularJs打造权限管理系统【简易型】

    AngularJS是一个广泛使用的前端JavaScript框架,它用于构建SPA(单页面应用)。这篇文章详细介绍了如何使用AngularJS构建一个简易型的权限管理系统。我们将通过多个知识点来展开讨论这一主题。 首先,要了解什么是...

    angularjs CURD Example

    1. **创建(Create)**:在AngularJS中,创建新记录通常涉及到向服务器发送POST请求。这可以通过AngularJS的$http服务或者使用ngResource模块来实现。ngResource提供了一个资源对象,可以方便地执行CRUD操作。你需要...

    angularjs实现上传图片并且预览

    4. **服务器端处理**:在服务器端,你需要接收这个POST请求,并将图片保存到指定的目录或数据库。具体实现取决于你使用的后端技术,如Node.js的Express框架、PHP的Laravel或Python的Django等。 5. **成功反馈**:...

Global site tag (gtag.js) - Google Analytics