form表单和ajax中的post请求后台获取数据⽅法（深度好⽂）最近要做后台数据接收，因为前台传来的数据太过于混乱，所以总结了⼀下前台数据post请求⽅法，顺便写了下相对应的后台接收⽅法。
前台主要的contenttype为下⾯三种：（需要注意的是请求头中datatype与contenttype的区别，datatype是要求浏览器返回的数据格式，这⾥的contenttype指的是提交的数据格式）应⽤情景：
multipart/form-data类型主要是上传⽂件时⽤到；
application/x-www-form-urlencoded类型主要是提交k-v时⽤到，当然这种⽅法也可以将json设置在v中提交json数据；
application/json类型主要是传递json数据⽤到，层次⽐较深的数据；
post提交主要就是依赖于浏览器表单提交和ajax⽅式提交，两者对这三种⽅式都可以实现，下⾯分别介绍这两类⽅法：
⼀、Form表单实现（不含后端）
1、application/x-www-form-urlencoded⽅法
1. <form action="Handler
2.ashx" method="post" enctype="application/x-www-form-urlencoded">
2. <p>客户名称: <input type="text" name="CustomerName" /></p>
3. <p>客户电话: <input type="text" name="CustomerTel" /></p>
4. <p><input type="submit" value="提交" /></p>
5. </form>
2、multipart/form-data⽅法
1. <form action="Handler
2.ashx" method="post" enctype="multipart/form-data">
<p><input type="text" name="str" value="⼀个字符串，别管它" /></p>
2. <p>要上传的⽂件１<input type="file" name="file1"/></p>
3. <p>要上传的⽂件２<input type="file" name="file2"/></p>
4. <p><input type="submit" value="提交" /></p>
5. </form>
3、json⽅法
3.1 form表单数据可以直接json序列化var queryArray = $(formElement).serializeArray();
3.2 也可以在k-v中的v中添加实际值，当然这个违背了form表单多个k-v的初衷，但是也可以实现
⼆、ajax实现（含后端）
1、application/x-www-form-urlencoded⽅法(json与kv)
1. var data={ "books": [ { "language":"Java" , "edition":"second" }, { "language":"C++" , "lastName":"fifth" }, { "language":"C" , "lastName":"third" } ] }
2. $.ajax({
3. type: "post",
4. url: "localhost:39870/api/test/getUrlencode",
5. contentType : "application/x-www-form-urlencoded; charset=UTF-8",
6. data: { books: JSON.stringify(data), txtPass: "123" },
7. success: function (res) {
8.
9. //alert(res);
10. //layer.close(ii);
11. }
12. });
后台处理程序
1. [HttpPost]
2. public IHttpActionResult getFormdata()
url编码处理3. {
4.
5. string id = HttpContext.Current.Request["id"];
6. string name = HttpContext.Current.Request["name"];
7.
8. return Ok("success2");
9. }
⽤上述⽅法既可以获取简单的kv数据，也可以⾃⼰拼接类json数据，不过其中的数据都是默认在浏览器服务器进⾏url编码解码。可以⽤下⾯⽅法实验得出：
1. HttpRequest request = HttpContext.Current.Request;
2. Stream stream = request.InputStream;
3. StreamReader streamReader = new StreamReader(stream);
4. string json = string.Empty;
5. json = streamReader.ReadToEnd();
6. json = HttpUtility.UrlDecode(json);
"books=%7B%22books%22%3A%5B%7B%22language%22%3A%22Java%22%2C%22edition%22%3A%22second%22%7D%2C%7B%22language%22%3A%22C%2B%2B%22%2C%22la 进⾏编码后数据为：
"books={\"books\":[{\"language\":\"Java\",\"edition\":\"second\"},{\"language\":\"C++\",\"lastName\":\"fifth\"},{\"language\":\"C\",\"lastName\":\"third\"}]}&txtPass=123"
2、multipart/form-data⽅法
1. var data = new FormData();
2. var files = $("#fileUpload").get(0).files;
3. data.append("id","001");
4. var name={ "books": [ { "language":"Java" , "edition":"second" }, { "language":"C++" ,
"lastName":"fifth" }, { "language":"C" , "lastName":"third" } ] };
5. data.append("name",JSON.stringify(name));
6. if(files.length > 0){
7. for (var i = 0; i < files.length;i++){
8. data.String(), files[i]);
9. }
10. }
11. $.ajax({
12. type: "post",
13. url: "localhost:39870/api/test/getFormdata",
14. contentType: false,
15. cache: false,
16. currentType: false,
17. processData: false,
18. data: data,
19. success: function (res) {
20.
21. //alert(res);
22. }
23. });
后台获取数据
1. string id=HttpContext.Current.Request["id"];
2. string name = HttpContext.Current.Request["name"];
3. HttpFileCollection files = HttpContext.Current.Request.Files;
4.
5. foreach (string key in files.AllKeys)
6. {
7. HttpPostedFile file = files[key];
8. if (string.IsNullOrEmpty(file.FileName) == false)
9. {
10.
11. string path = HttpContext.Current.Server.MapPath("~/App_Data/") + file.FileName;
12. string path2 = HttpContext.Current.Request.Url.Authority+"/" + file.FileName;
13. string path3 = "C:/Users/xcy/Desktop/⾦阁寺需求分析/" + file.FileName;
14. file.SaveAs(path3);
15. }
16. }
此种⽅法可以接受kv数据，类json数据和⽂件，数据并未进⾏url编码。可以⽤下⾯⽅法验证：
1. HttpRequest request = HttpContext.Current.Request;
2. Stream stream = request.InputStream;
3. StreamReader streamReader = new StreamReader(stream);
4. string json = string.Empty;
5. json = streamReader.ReadToEnd();
6. json = HttpUtility.UrlDecode(json);
未进⾏url编码的时候json为：
"------WebKitFormBoundaryB4I0wChQCc6LwykM\r\nContent-Disposition: form-data; name=\"id\"\r\n\r\n001\r\n------WebKitFormBoundaryB4I0wChQCc6LwykM\r\nContent-Disposition: form-data;
name=\"name\"\r\n\r\n{\"books\":[{\"language\":\"Java\",\"edition\":\"second\"},{\"language\":\"C++\",\"lastName\":\"fifth\"},{\"language\":\"C\",\"lastName\":\"third\"}]}\r\n------
WebKitFormBoundaryB4I0wChQCc6LwykM--\r\n"
进⾏url编码之后没有变化，为：
"------WebKitFormBoundaryB4I0wChQCc6LwykM\r\nContent-Disposition: form-data; name=\"id\"\r\n\r\n001\r\n------WebKitFormBoundaryB4I0wChQCc6LwykM\r\nContent-Disposition: form-data;
name=\"name\"\r\n\r\n{\"books\":[{\"language\":\"Java\",\"edition\":\"second\"},{\"language\":\"C \",\"lastName\":\"fifth\"},{\"language\":\"C\",\"lastName\":\"third\"}]}\r\n------
WebKitFormBoundaryB4I0wChQCc6LwykM--\r\n"
3、json⽅法
1. var data={"books":[{"language":"Java","edition":"second"},{"language":"C++","lastName":"fifth"},{"language":"C","lastName":"third"}]};
2. $.ajax({
3. type: "post",
4. url: "localhost:39870/api/test/gettest3",
5. contentType: "application/json; charset=utf-8",
6. cache: false,
7. data: JSON.stringify(data),
8. success: function (res) {
9.
10. }
11. });
注意JOSN.stringify()，不添加都会失败，直接传的是url编码后的原字符串。这⾥插播⼀下字符串与对象转换
JSON.stringify(obj)将JSON转为字符串。
JSON.parse(string)将字符串转为JSON格式
例⼦：
1. var a={"name":"tom","sex":"男","age":"24"};
2.
3. var b='{"name":"Mike","sex":"⼥","age":"29"}';
4.
5. var aToStr=JSON.stringify(a);
6.
7. var bToObj=JSON.parse(b);
8.
9. alert(typeof(aToStr)); //string
11. alert(typeof(bToObj));//object
看完后就知道为什么要⽤JSON.stringify(obj)了，因为我们要穿的是字符串，⽽代码中data变量原来是js对象，so要变⼀下啦
⽽且JSON.stringify()会⾃动添加转义符，⽐如我们在⼀个字段包含"或者\的时候，如下：
1. var temp={
2. "F_CODE": "001",
3. "F_REGION_CODE": "001",
4. "F_ZTPG": "⼩\"东哥很'",
5. "F_PGZS": "string",
6. "F_PIC": "string",
7. "F_FILE": "string",
8. "F_TYPE": "string",
9. "F_PROJECT_CODE": "string",
10. "F_TIME": "2017-05-24T03:23:11.555Z"
11. };
12. var tt=JSON.stringify(temp);
temp显⽰的时候会不显⽰转义符\，当⽤stringify处理后会的字符串上传到后端的时候会出现转义符，使得上传数据不会出错
后台接收⽅法
3.1
1. public IHttpActionResult getTest4([FromBody]object jdata)
2. {
3. //dynamic
4. return Ok("ddd");
5. }
前台的contenttype必须设置为json，此为WebAPI的⽅式，这种⽅式添加FromBody这个参数，会针对contenttype为json的post请求⾃动拦截，如果当contenttype不为json，则会影响后⾯stream正常获取，即：如果在上⾯代码中添加楼下的代码，在下⾯的代码中是获取不到json数据的===
3.2
1. HttpRequest request = HttpContext.Current.Request;
2. Stream stream = request.InputStream;
3. StreamReader streamReader = new StreamReader(stream);
4. string json = string.Empty;
5. json = streamReader.ReadToEnd();
这种⽅法在前两种的⽅法中已经提到过，⽤stream的⽅式获取⽅法⽐较通⽤，这个⽅法是万能的，v5===
后来想了想还是request是王道，其他的好多都是在他基础上扩展的，⽬前知道request主要有流和参数获取两种
===============================================================================================
有⼩伙伴们问get请求的事⼉，顺便写了下
第⼀种：json对象
1. $(document).ready(function(){
2. var data={
3. "F_CODE": "1",
4. "F_NAME": "xcy"
5. };
6. $.ajax({
7. type: "get",
8. url: "localhost:27110/test/formbody",
9. cache: false,
10. data: data,
11. success: function (res) {
12.
13. }
14. });
15.
16. });
第⼆种：url
1. $(document).ready(function(){
2. $.ajax({
3. type: "get",
4. url: "localhost:27110/test/formbody?F_CODE=1&&F_NAME=xcy",
5. cache: false,
6. data: data,
7. success: function (res) {
8.
9. }
10. });
11.
12. });
这⾥⼀定要将data⾥⾯设置为json对象，不要json.stringify加⼯，这样才能放到url链接后⾯，不然直接把json字符串放进去了，如下：
后台处理
第⼀种：与webapi⽆关
string name = HttpContext.Current.Request["F_CODE"];
第⼆种：webapi参数绑定
1. [HttpGet]
2. public IHttpActionResult formbody(string F_CODE)
3. {
5. return Ok(F_CODE);
6. }
不是很难，注意⼀点的是get请求不⽤设置contenttype，因为contenttype是针对body的，既然body没了，contenttype⾃然没效果了。总结了⼀天的时间来搞post前台提交后台接受问题，基本⽤途够了，还需进⼀步理解，希望⼤⽜斧正==
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论