加载中…
个人资料
微博
  • 博客等级：
  • 博客积分：
  • 博客访问：
  • 关注人气：
  • 获赠金笔：0支
  • 赠出金笔：0支
  • 荣誉徽章：
正文 字体大小：大 中 小

表单和ajax中的post请求&&后台获取数据方法（深度好文）

(2017-09-07 18:36:23)
分类： js

http://blog.csdn.net/xcymorningsun/article/details/53019425

  最近要做后台数据接收，因为前台传来的数据太过于混乱，所以总结了一下前台数据post请求方法，顺便写了下相对应的后台接收方法。

        前台主要的contenttype为下面三种：（需要注意的是请求头中datatype与contenttype的区别，datatype是要求浏览器返回的数据格式，这里的contenttype指的是提交的数据格式）

http://img.blog.csdn.net/20161103105944626?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

应用情景：

 

  • 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方法


[html] view plain copy
  1. <</span>span style="font-size:14px;"><</span>form action="Handler2.ashx" method="post" enctype="application/x-www-form-urlencoded">  
  2. <</span>p>客户名称: <</span>input type="text" name="CustomerName" style="width: 300px" /></</span>p>  
  3. <</span>p>客户电话: <</span>input type="text" name="CustomerTel" style="width: 300px" /></</span>p>  
  4. <</span>p><</span>input type="submit" value="提交" /></</span>p>  
  5. </</span>form></</span>span>  

 


2、multipart/form-data方法

 

 

[html] view plain copy
  1. <</span>h1><</span>a name="t6"></</span>a><</span>span style="font-size:14px;"><</span>form action="Handler2.ashx" method="post" enctype="multipart/form-data"></</span>span></</span>h1><</span>span style="font-size:14px;"><</span>p><</span>input type="text" name="str" value="一个字符串，别管它" /></</span>p>  
  2. <</span>p>要上传的文件１<</span>input type="file" name="file1"/></</span>p>  
  3. <</span>p>要上传的文件２<</span>input type="file" name="file2"/></</span>p>  
  4. <</span>p><</span>input type="submit" value="提交" /></</span>p>  
  5. </</span>form></</span>span>  

 


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)


 

[javascript] view plain copy
  1. var data={     "books": [         { "language":"Java" , "edition":"second" },         { "language":"C++" , "lastName":"fifth" },         { "language":"C" , "lastName":"third" }     ] }  
  2.        $.ajax({  
  3.            type: "post",  
  4.            url: "http://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.                //;  
  10.                //layer.close(ii);  
  11.            }  
  12.        });  

 


后台处理程序


 

[csharp] view plain copy
  1. [HttpPost]  
  2. public IHttpActionResult getFormdata()  
  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编码解码。可以用下面方法实验得出：

 


 

[csharp] view plain copy
  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);  

 


json中未进行urldecode时候数据为：

"books={"books":[{"language":"Java","edition":"second"},{"language":"C++","lastName":"fifth"},{"language":"C","lastName":"third"}]}&txtPass=123"
进行编码后数据为：

"books={"books":[{"language":"Java","edition":"second"},{"language":"C++","lastName":"fifth"},{"language":"C","lastName":"third"}]}&txtPass=123"


2、multipart/form-data方法


 

[javascript] view plain copy
  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.append(i.toString(), files[i]);  
  9.          }  
  10.      }  
  11.      $.ajax({  
  12.          type: "post",  
  13.          url: "http://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.              //;  
  22.          }  
  23.      });  


 


后台获取数据

 

 

[csharp] view plain copy
  1. "font-size:14px;">            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编码。可以用下面方法验证：

 

[csharp] view plain copy
  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方法

 

 

[javascript] view plain copy
  1. "font-size:14px;">        var data={"books":[{"language":"Java","edition":"second"},{"language":"C++","lastName":"fifth"},{"language":"C","lastName":"third"}]};  
  2.         $.ajax({  
  3.             type: "post",  
  4.             url: "http://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格式

例子：

 

[javascript] view plain copy
  1. "font-size:14px;">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  
  10.    
  11. alert(typeof(bToObj));//object  


看完后就知道为什么要用JSON.stringify(obj)了，因为我们要穿的是字符串，而代码中data变量原来是js对象，so要变一下啦

而且JSON.stringify()会自动添加转义符，比如我们在一个字段包含"或者\的时候，如下：

 

[javascript] view plain copy
  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

[javascript] view plain copy
  1. "font-size:14px;">        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

 

[javascript] view plain copy
  1. "font-size:14px;">            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对象

 

[javascript] view plain copy
  1. $(document).ready(function(){  
  2.     var data={  
  3.         "F_CODE": "1",  
  4.         "F_NAME": "xcy"  
  5.     };  
  6.     $.ajax({  
  7.         type: "get",  
  8.         url: "http://localhost:27110/test/formbody",  
  9.         cache: false,  
  10.         data: data,  
  11.         success: function (res) {  
  12.   
  13.         }  
  14.     });  
  15.   
  16. });  

 

第二种：url

 

[javascript] view plain copy
  1. $(document).ready(function(){  
  2.     $.ajax({  
  3.         type: "get",  
  4.         url: "http://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字符串放进去了，如下：

http://localhost:27110/test/formbody?{"F_CODE":"1","F_NAME":"xcy"}&_=1495087390056


后台处理

第一种：与webapi无关

 

[csharp] view plain copy
  1. "font-size:14px;">            string name = HttpContext.Current.Request["F_CODE"];  

第二种：webapi参数绑定

 

[csharp] view plain copy
  1. [HttpGet]  
  2. public IHttpActionResult formbody(string F_CODE)  
  3. {  
  4.   
  5.     return Ok(F_CODE);  
  6. }  

 

不是很难，注意一点的是get请求不用设置contenttype，因为contenttype是针对body的，既然body没了，contenttype自然没效果了。

喜欢

0

阅读┊ 收藏 ┊ 喜欢▼ ┊打印┊举报/Report
  

新浪BLOG意见反馈留言板　欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

Copyright © 1996 - 2022 SINA Corporation, All Rights Reserved

新浪公司 版权所有