ANGULAR JS POST 数据解析

ANGULAR js POST 数据的时候,默认是发送JSON数据到服务端的。

var params={defId:"1234"};

$http.post(url,params).success(function(data, status, headers, config){
                                            
});

我们在服务端获取数据数据时,使用 request.getParmeter("defId");
这种方法我们是获取不到数据的。

解决这个问题有两个办法:

1.在服务端解决

在服务端使用方法:

String json=FileUtil.inputStream2String( request.getInputStream());

在服务端使用流的方式获取数据,将流转成字符串,我们在解析此字符串。

2.在浏览器端解决

将数据序列化成表单提交的方式,使用application/x-www-form-urlencoded编码方式提交。

我们编写一个通用的转换代码。
var baseServices = angular.module( "baseServices", [] );
baseServices.factory("$jsonToFormData",function() {
        function transformRequest( data, getHeaders ) {
                var headers = getHeaders();
                headers["Content-Type"] = "application/x-www-form-urlencoded; charset=utf-8";
                return $.param(data);
        }
        return( transformRequest );
});

在编写发送请求代码如下:

$http.post(url,params,{transformRequest:$jsonToFormData}).success(function(data, status, headers, config){
                                    
});

这样就将数据使用表单编码的方式发送到服务端,服务端可以使用 reuqest.getParameter("defId");的方式获取数据了。

注意:
var headers = getHeaders();
headers["Content-Type"] = "application/x-www-form-urlencoded; charset=utf-8";

这句,我之前写的是headers["Content-type"],发现一个奇怪的问题,就是在FIREFOX下能将数据传地服务端。

在chrome 下,使用同样的代码却不行,服务端接收为空,经过浏览器抓包分析,发现有两个header,一个是Content-type,
一个是Content-Type ,我把Content-type 修改成Content-Type覆盖默认的application/json方式,数据能正确传递了。

ANGULAR JS POST 数据解析

时间: 2024-10-10 02:36:23

ANGULAR JS POST 数据解析的相关文章

关于angular.js请求数据的跨域问题

- 一般来说跨域只存在于浏览器上有这个问题.- 如果有碰到跨域问题 + 1.通过自己的服务器接受数据在转发(以下方法并不安全) + 2.在发送方的请求头中头添加:Access-Control-Allow-Origin: * (对方服务器支持) + 3.通过jsonp发送数据(jsonp只是一种数据格式)(对方服务器支持) - 什么是JSONP Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据. 为

angular.js的依赖注入解析

本教程使用AngularJS版本:1.5.3        angularjs GitHub: https://github.com/angular/angular.js/        AngularJs下载地址:https://angularjs.org/ 用有过spring的人都知道,Spring的核心思想就是DI(依赖注入,Dependency Injection)和IOC(控制反转 Invension of Controller),AngularJS的service其实就是用到了这里的

angular js 实现表单提交时下面的table获取到表单里面的数据

angular js 实现表单提交时下面的table获取到表单里面的数据<!DOCTYPE html><html ><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css"/> <s

angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制

Angular.js 中的特性,双向绑定. 让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $apply 他们的区别是什么,我们来介绍下: $watch 这是一个监听 scope 上数据的监听器 方法说明: $scope.$watch('参数',function(newValue,oldValue){ //逻辑处理 }) 上面我们就是创建了一个监听器. ‘参数’ 就是$scope对象下的一个对象

angular js 多处获取ajax数据的方法

angular js 多处获取ajax数据的方法 var app=angular.module("cart",[]);app.service("getData",function ($http) { return{ ajax:function () { return $http.get("product.json"); } }}); app.controller("listCtrl",function ($scope,getD

Angular.js中的指令——易懂全解析

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span><span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">angular.js中,指令是最基础的

angular js 指令的数据传递 及作用域数据绑定

<div my-directive my-url="http://google.com" my-link-text="Click me to go to Google"></div> angular.module('myApp', []) .directive('myDirective', function() { return { restrict: 'A', replace: true, scope: { myUrl: '@', //绑定

angular js 模拟获取后台的数据

在这里我们把后台的数据用一个.json文件进行代替. 项目的目录结构如下: puDongLibraryLearning----ui-router-learning ---- data-------people.json puDongLibraryLearning-test.html people.json的代码如下: [ { "id": "293", "isActive": false, "eyeColor": "b

activiti自定义流程之整合(二):使用angular js整合ueditor创建表单

注:整体环境搭建:activiti自定义流程之整合(一):整体环境配置 基础环境搭建完毕,接下来就该正式着手代码编写了,在说代码之前,我觉得有必要先说明一下activit自定义流程的操作. 抛开自定义的表单不谈,通过之前的了解,我们知道一个新的流程开始,是在启动流程实例(processIntence)的时候,而流程实例依赖于流程定义(processDefinition),流程定义又依赖于流程模型(model). 我们用到的自定义表单需要在创建模型,画模型图的时候就指定表单的名称formKey,需