版权声明：本文为博主原创文章，未经博主允许不得转载。 http://blog.csdn.net/xcymorningsun/article/details/53019425

最近要做后台数据接收，因为前台传来的数据太过于混乱，所以总结了一下前台数据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方法

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

2、multipart/form-data方法

[html] view plaincopy

<form action="Handler2.ashx" method="post" enctype="multipart/form-data">

<p><input type="text" name="str" value="一个字符串，别管它" /></p> <p>要上传的文件１<input type="file" name="file1"/></p> <p>要上传的文件２<input type="file" name="file2"/></p> <p><input type="submit" value="提交" /></p> </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)

[javascript] view plaincopy
  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. //alert(res);
  9. //layer.close(ii);
  10. }
  11. });

后台处理程序

[csharp] view plaincopy
  1. [HttpPost]
  2. public IHttpActionResult getFormdata()
  3. {
  4. string id = HttpContext.Current.Request["id"];
  5. string name = HttpContext.Current.Request["name"];
  6. return Ok("success2");
  7. }

用上述方法既可以获取简单的kv数据，也可以自己拼接类json数据，不过其中的数据都是默认在浏览器服务器进行url编码解码。可以用下面方法实验得出：

[csharp] view plaincopy
  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=%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%22lastName%22%3A%22fifth%22%7D%2C%7B%22language%22%3A%22C%22%2C%22lastName%22%3A%22third%22%7D%5D%7D&txtPass=123"
进行编码后数据为：

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

2、multipart/form-data方法

[javascript] view plaincopy
  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. //alert(res);
  21. }
  22. });

后台获取数据

[csharp] view plaincopy
  1. <span style="font-size:14px;">            string id=HttpContext.Current.Request["id"];
  2. string name = HttpContext.Current.Request["name"];
  3. HttpFileCollection files = HttpContext.Current.Request.Files;
  4. foreach (string key in files.AllKeys)
  5. {
  6. HttpPostedFile file = files[key];
  7. if (string.IsNullOrEmpty(file.FileName) == false)
  8. {
  9. string path = HttpContext.Current.Server.MapPath("~/App_Data/") + file.FileName;
  10. string path2 = HttpContext.Current.Request.Url.Authority+"/" + file.FileName;
  11. string path3 = "C:/Users/xcy/Desktop/金阁寺需求分析/" + file.FileName;
  12. file.SaveAs(path3);
  13. }
  14. }</span>

此种方法可以接受kv数据，类json数据和文件，数据并未进行url编码。可以用下面方法验证：

[csharp] view plaincopy
  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 plaincopy
  1. <span style="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. });</span>

注意JOSN.stringify()，不添加都会失败，直接传的是url编码后的原字符串。这里插播一下字符串与对象转换

JSON.stringify(obj)将JSON转为字符串。

JSON.parse(string)将字符串转为JSON格式

例子：

[javascript] view plaincopy
  1. <span style="font-size:14px;">var a={"name":"tom","sex":"男","age":"24"};
  2. var b='{"name":"Mike","sex":"女","age":"29"}';
  3. var aToStr=JSON.stringify(a);
  4. var bToObj=JSON.parse(b);
  5. alert(typeof(aToStr));  //string
  6. alert(typeof(bToObj));//object</span>

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

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

[javascript] view plaincopy
  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 plaincopy
  1. <span style="font-size:14px;">        public IHttpActionResult getTest4([FromBody]object jdata)
  2. {
  3. //dynamic
  4. return Ok("ddd");
  5. }</span>

前台的contenttype必须设置为json，此为WebAPI的方式，这种方式添加FromBody这个参数，会针对contenttype为json的post请求自动拦截，如果当contenttype不为json，则会影响后面stream正常获取，即：如果在上面代码中添加楼下的代码，在下面的代码中是获取不到json数据的===

3.2

[javascript] view plaincopy
  1. <span style="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();</span>

这种方法在前两种的方法中已经提到过，用stream的方式获取方法比较通用，这个方法是万能的，v5===

后来想了想还是request是王道，其他的好多都是在他基础上扩展的，目前知道request主要有流和参数获取两种

===============================================================================================

有小伙伴们问get请求的事儿，顺便写了下

第一种：json对象

[javascript] view plaincopy
  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. });

第二种：url

[javascript] view plaincopy
  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. });

这里一定要将data里面设置为json对象，不要json.stringify加工，这样才能放到url链接后面，不然直接把json字符串放进去了，如下：

http://localhost:27110/test/formbody?{%22F_CODE%22:%221%22,%22F_NAME%22:%22xcy%22}&_=1495087390056

后台处理

第一种：与webapi无关

[csharp] view plaincopy
  1. <span style="font-size:14px;">            string name = HttpContext.Current.Request["F_CODE"];</span>

第二种：webapi参数绑定

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

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

转载于:https://www.cnblogs.com/QTSS/p/8554981.html

表单和ajax中的post请求后台获取数据方法相关推荐

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

    最近要做后台数据接收,因为前台传来的数据太过于混乱,所以总结了一下前台数据post请求方法,顺便写了下相对应的后台接收方法. 前台主要的contenttype为下面三种:(需要注意的是请求头中data ...

  2. 关于ajax请求后台获取下拉列表用的数据

    一.效果展示 有时候需要在页面请求后台获取数据:这里就用到了ajax去后台获取数据: 数据库的数据是这样的: mysql> select * from ocenter_travel_class_ ...

  3. vueform表单文件上传_峰哥说技术系列-8.Spring Boot文件上传(Form表单和Ajax方式)

    今日份主题 Spring Boot文件上传(Form表单和Ajax方式) 在Spring Boot中,和文件上传的主要和MultipartResolver接口有关,他有两个实现类 StandardSe ...

  4. ajax 模拟表单提交,Ajax模拟Form表单提交，含多种数据上传

    ---恢复内容开始--- Ajax提交表单.使用FormData提交表单数据和上传的文件(这里的后台使用C#获取,你可以使用Java一样获取) 有时候前台的数据提交到后台,不想使用form表单上传,希 ...

  5. jquery表单ajax json数据,jquery序列化form表单使用ajax提交后处理返回的json数据

    1.返回json字符串: /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try ...

  6. form表单、控制器中接收表单提交数据的4种方式

    Form表单 这篇文章主要讲的是form表单的提交 之前我们接触过的form表单元素是在Bootstrap框架里面,这次也将用到Bootstrap框架去布局(见图表1)通过Bootstrap框架布局呈 ...

  7. Django框架 之 Form表单和Ajax上传文件

    Django框架 之 Form表单和Ajax上传文件 浏览目录 Form表单上传文件 Ajax上传文件 伪造Ajax上传文件 Form表单上传文件 html 1 2 3 4 5 6 7 <h3& ...

  8. Python Day 67 Dango框架图解（总结）、Wsgiref和uwsgi、前后端传输数据的编码格式、From表单和Ajax方式在前端往后端发送文件、补充一下页面清缓存...

    ##Django框架图解 ##前后端传输数据的编码格式 #前后端传输数据的编码格式1.urlencoded 2.formdata 3.application/json ##From表单和Ajax方式在 ...

  9. form表单与ajax的两种提交方式

    一.form表单与ajax两种提交方式使用的场景: 1)form表单提交适用于跳转到另一个页面,form标签中的数据通过submit的方式提交到后台,提交成功后会跳转到另一个页面,但没有返回值. 2) ...

  10. jQuery实现文件下载( 隐藏表单实现ajax下载 )

    原因是Sigma表格控件要实现Excel导出表格中的数据 , 用$.Ajax()实现不了, 所以暂时用了个折中的办法 , 项目里类似情况后边可能还很多 , 记录一下, 以后有更好的办法再来改进吧 链接 ...

最新文章

  1. 手把手教你用Kaggle开启机器学习之旅（附资源链接）
  2. centos下面安装mysql_centos下安装mysql
  3. 嵌入式linux 时间同步,解决嵌入式Linux中的时区问题
  4. HttpClient4.5使用RequestConfig配置连接信息
  5. Postgresql 远程连接配置
  6. 利用LCD1602显示超声波测距
  7. Java垃圾回收精粹 — Part1
  8. S5PV210体系结构与接口04：代码重定位 SDRAM初始化
  9. cocos2d-x游戏引擎核心(3.x)----事件分发机制之事件从(android,ios,desktop)系统传到cocos2dx的过程浅析...
  10. 信息系统项目管理师学习笔记
  11. IT服务管理领域的最佳实践知识体系ITIL4
  12. 【练习】Accessing data with MySQL
  13. ModelSim SE简明操作指南
  14. 大疆Tello EDU版本（新发布）
  15. 洛谷 #2197. Nim游戏
  16. python的字节码(ByteCode)
  17. web后端--Django学习笔记04
  18. 【CODEVS 3287】【NOIP2013】火车运输
  19. A标签新窗口打开怎么设置
  20. Java - 处理unsigned类型

热门文章

  1. c语言闰年题目程序,浙大版《C语言程序设计（第3版）》题目集 练习3-5 输出闰年...
  2. latex 数字上标 指数怎么打
  3. C++ boost共享锁 unique_lock shared_lock
  4. 比特币 以太坊 真的是去中心化的吗？
  5. matlab里rem怎么表示,matlab的rem()和mod()函数
  6. webService发布在IIS服务器上
  7. php 方法注释代码规范,PHP开发代码规范
  8. 阶段3 2.Spring_07.银行转账案例_8 基于接口的动态代理回顾
  9. 锦囊5-斐波那契数列
  10. 【概率论】5-9:多项式分布(The Multinomial Distributions)