用土豆做美食的视频网站,商城网页设计,泰州网站制作公司,做网站吗事件回放#xff1a; 之前一段时间#xff0c;公司里前端用的Angularjs 发送http请求也是用的ng的组件#xff0c;后台是.Net的WebApi 前端 var data {PArgs: {PageIndex: 0,PageSize: 8,RowsCount: 0}
};$http.post(/Api/Test/ABC, data).success(function (d…事件回放 之前一段时间公司里前端用的Angularjs 发送http请求也是用的ng的组件后台是.Net的WebApi 前端 var data {PArgs: {PageIndex: 0,PageSize: 8,RowsCount: 0}
};$http.post(/Api/Test/ABC, data).success(function (data) {console.log(data)
}); 后台接收 using SignalRDemo.VModel;
using System.Web.Http;namespace SignalRDemo.Api
{public class TestController : ApiController{[HttpPost]public object ABC([FromBody]MMCourse model){return model;}}
} 具体的Model是这样子的 using System;namespace SignalRDemo.VModel
{public class MMCourse : BaseModel{//上传分页public PagerArgs PArgs { set; get; }}public sealed class PagerArgs{/// summary/// 分页/// /summary/// param namepageIndex每页数据条数/param/// param namepageSize数据总行数/parampublic PagerArgs(int pageIndex, int pageSize){this.PageIndex pageIndex;this.PageSize pageSize;}/// summary/// 当前页索引/// /summarypublic int PageIndex { get; set; }/// summary/// 每页数据条数/// /summarypublic int PageSize { get; set; }}
} Model 流程就是后台建好实体类创建接口 前台指定要访问的接口传入与后台接收参数的实体类结构相同的对象后台就能接收到这个数据。运行正常。 后来 某一新建页面 前台没有使用Angularjs而是用的jQuery访问同一接口突然发现 后台接收到的参数一直是null。 WebApi Post方式 怎么会无法获取参数呢 通过查看控制台的http请求和后台的数据经过不断的摸索依次发现几个解决方法也伴随着一些诡异事件 方案① 首先 后台肯定是成功接收到了请求的但是由于某种原因接口方法的输入参数没有值。 初步判断跟类型转换有关将接收类型改为JObject就能收到数据了然后再序列化-反序列化 using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using SignalRDemo.VModel;
using System.Web.Http;namespace SignalRDemo.Api
{public class TestController : ApiController{[HttpPost]public object ABC([FromBody]JObject model){return JsonConvert.DeserializeObjectMMCourse(JsonConvert.SerializeObject(model));}}
} 方案②经过修改参数发现在不改动后台的情况下如果参数是 var data {A:1
}; 后台收到的数据结构是这样的 {Pargs:{PageIndex:0,PageSize:0}
} 不管怎样数据还是能传递过去只是webapi将参数转换的时候应该是出了问题。 回头仔细看了一下后台实体类发现PagerArgs类有一个构造函数 还是要有两个参数的。试着添加了一个无参构造发现数据能够正常获取了 这个如果要深究的话 就要研究webapi底层对字符串的反序列化处理了暂时忽略。 方案③ 虽然通过上面两种方式可以迂回解决问题但是心里还纠结着一个问题为毛用Ng的$http.post一直没事换了jQuery.post就发生这么多事 开始对比两种方式的请求信息 点击数据上方的【view source】 查看发送的字符串 ng : {PArgs:{PageIndex:0,PageSize:8,RowsCount:0}} jq: PArgs%5BPageIndex%5D0PArgs%5BPageSize%5D8PArgs%5BRowsCount%5D0
decode之后是
PArgs[PageIndex]0PArgs[PageSize]8PArgs[RowsCount]0 ng发送的数据跟预想中是一样的 跟发送的对象保持一直的json结构。 但是 jq发送的怎么会成了这种模样此外 Request Payload跟Form Data又是什么是Content-Type的区别引起的这些么 通过查看jq.ajax的Api 找到下面一段 说的就是 如果使用的是post 默认的contentType是“application/x-www-form-urlencoded;charsetUTF-8“ 如果contentType是..form..则发送数据的是Form Data
如果是”application/json“ ,则是Request Payload。 而使用这种内容类型时会把数据用$.param()转换一次之后再发送。 跟用之前用jq发送的数据内容完全匹配就是这个原因了。 那这样处理起来就简单了只需要发送数据前设置contentTypeapplication/json;charsetUTF-8就可以了。 还有一点要注意的是 ajax是不会发送对象的 最终都要转换成字符串。所以发送的时候需要人为的处理一下。 var data {PArgs: {PageIndex: 0,PageSize: 8,RowsCount: 0}
};$.ajaxSetup({contentType: application/json;charsetUTF-8
})$.post(/Api/Test/ABC, JSON.stringify(data), function (rst) {//TODO
}, json); 或者 $.ajax({url: /Api/Test/ABC,dataType: json,type: post,contentType: application/json;charsetUTF-8,data: JSON.stringify(data),success: function (rst) {console.log(rst);}
}) 转载于:https://www.cnblogs.com/TiestoRay/p/5032202.html
