AngularJs $http.post 数据后台获取不到数据问题的解决过程

第一次使用 AngularJs 的 $http 模块的时候，遇到过后台获取不到前台提交数据的问题，检查代码没有发现问题，先上代码。

js 代码

angular.module("newsApp", []).constant("newsInfoUrl", "/WebPage/Page/NewsInfo/").factory("newsService", function($http) {return {getNewsList: function (categoryId, callBack) {//请求后台数据 $http.post("/WebPage/Page/GetNewsList",//参数分类ID，后台获取不到
                    { id: categoryId }).then(function (resp) {callBack(resp);});} }}) .controller("newsListCtrl", ["$scope", "newsService", "newsInfoUrl", function($scope, newService, newsInfoUrl) {$scope.cId = "";var getNewsList = function() {newService.getNewsList($scope.cId, function(resp) {$scope.newsList = resp.data;});}$scope.newsInfoUrl = newsInfoUrl;$scope.reload = getNewsList;}]);

后台代码

        [HttpPost]public JsonResult GetNewsList(FormCollection collection){ 　　　　　　　//在这里 collection 里面没有数据var catrgoryId = collection["id"];var page = new PageContext{PageSize = 20};var cList = new ContentBusiness().GetContentList(string.Empty, catrgoryId, page);return Json(ConvertModel(cList));}

奇怪了，难道提交数据有问题？抓包看看

原来问题出在这里，我们平时用 jquery post 提交数据是以 form-data 的形式提交的，而 AngularJs 以 json 格式提交的，所以后台获取不到了。

问题找到了，解决就容易了。

解决方法 <一> 改后台，以参数的形式接收，不使用 FormCollection 或 Request.Form[]

        [HttpPost]public JsonResult GetNewsList(string id){ var page = new PageContext{PageSize = 20};var cList = new ContentBusiness().GetContentList(string.Empty, id, page);return Json(ConvertModel(cList));}

如果参数比较多，可以定义一个model对象，model对象的属性对应前台提交的参数，以model对象作为后台响应方法的参数。

解决方法 <二> 改AngularJs 提交数据的方式，使用全局配置配置$httpProvider 的 header 值，使用 transformRequest

　　　　　　　　　　对提交数据进行序列化，把 json 对象更改为字符串。

     angular.module("newsApp", []).config(["$httpProvider", function ($httpProvider) {　　　　　//更改 Content-Type$httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=utf-8";$httpProvider.defaults.headers.post["Accept"] = "*/*";$httpProvider.defaults.transformRequest = function (data) { //把JSON数据转换成字符串形式if (data !== undefined) { return $.param(data);}return data;};}]).constant("newsInfoUrl", "/WebPage/Page/NewsInfo/").factory("newsService", function ($http) {return {getNewsList: function (categoryId, callBack) {$http.post("/WebPage/Page/GetNewsList", {id: categoryId}).then(function (resp) {callBack(resp);});}}})    .controller("newsListCtrl", ["$scope", "newsService", "newsInfoUrl", function($scope, newService, newsInfoUrl) {$scope.cId = "";var getNewsList = function() {newService.getNewsList($scope.cId, function(resp) {$scope.newsList = resp.data;});}$scope.newsInfoUrl = newsInfoUrl;$scope.reload = getNewsList;}]);

转载于:https://www.cnblogs.com/fengh/p/6148779.html

AngularJs $http.post 数据后台获取不到数据问题的解决过程相关推荐

股票level2数据接口获取逐笔成交数据的过程
描述:通过股票level2数据接口获取逐笔成交数据的过程地点:https://gitee.com/l2gogogo 获取过程: /// <summary> /// 获取逐笔成交数据 // ...
解析xml数据存入bean映射到数据库的需求解决过程
解析xml数据存入bean映射到数据库的需求解决过程 2017年12月19日 15:18:57 守望dfdfdf 阅读数:419 标签: xmlbean 更多个人分类: 工作问题编辑版权声明 ...
按某一列统计重复数据,并获取对应行数据
文章目录一.实现思路二.实例分析三.编写代码四.写入文件一.实现思路读取文件–按列分组–获取对应行数据二.实例分析需求:按县统计人数,统计结果使用"省市县/区"描述 ...
JAVA8根据List对象属性获取重复数据和获取去重后数据
获取重复数据 List<String> uniqueList = tempList.stream().collect(Collectors.groupingBy(TAreaEntity:: ...
python处理期货数据_获取和讯期货数据（Python版本）
获取和讯期货数据(Python版本) 获取和讯期货数据(Python版本) Author: edwardgyw, Date: 2016-11-28 14:38:44 Tags: Python 扩展商 ...
oracle寻找第一条数据,oracle 获取第一条数据
关于取第一条数据的sql特此作了一个例子如下: SELECT * FROM tableName where fd_rt = 'A' --and rownum=1 ORDER BY fd_date DE ...
matlab 获取雅虎数据,pandas获取雅虎金融数据
pandas.jpg 首先,强烈推荐关注Dr. Fish, 每篇文章都很有深度.因为受到她<用Python浅析股票数据>文章的启发,所以分享下最近几天学习获取股票交易历史数据的总结. 首先 ...
股票实时数据 python_Tushare 获取股票实时数据
Tushare 获取股票实时数据自己实现了一个能获取股票实时交易数据的脚本,功能是每3秒钟获取当前大盘涨跌,和自己添加股票的价格和涨跌幅原理是通过获取Tushare 平台提供的api,来获取股票数 ...
微信小程序 JS中遍历后台获取的data数据并赋值
开发场景: 需要把后台Java端查询到的图片动态显示在页面上. Java端传过来的图片是base64类型的,前一篇文章已经介绍怎么把base64 转为图片.https://blog.csdn.net/ ...
java数据返回到界面,java后台获取网页ajax数据和返回数据简单源码
呼唤远方 1新建一个servlet xml中相应配置(一般自动)2创建service方法3接受参数,做操作,返回数据比如页面发送ajax请求到SomeServlet$.post("SomeS ...

AngularJs $http.post 数据后台获取不到数据问题的解决过程

AngularJs $http.post 数据后台获取不到数据问题的解决过程相关推荐

最新文章

热门文章

AngularJs $http.post 数据后台获取不到数据问题 的解决过程

AngularJs $http.post 数据后台获取不到数据问题 的解决过程相关推荐

最新文章

热门文章

AngularJs $http.post 数据后台获取不到数据问题的解决过程

AngularJs $http.post 数据后台获取不到数据问题的解决过程相关推荐