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

发布时间:2022-07-05 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了form 表单和ajax中的post请求&&后台获取数据方法(深度好文)脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

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

应用情景:

  • 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. @H_834_126@
    <form action="Handler2.ashx" method="post" enctype="application/x-www-form-urlencoded">
  • <p>客户名称: <input type="text" name="CustomerName" style="width: 300px" /></p>
  • <p>客户话: <input type="text" name="CustomerTel" style="width: 300px" /></p>
  • <p><input type="submIT" value="提交" /></p>
  • </form>
  • 2、multipart/form-data方法

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

      <p><input type="text" name="str" value="一个字符串,别管它" /></p>
    2. <p>要上传的文件1<input type="file" name="file1"/></p>
    3. <p>要上传的文件2<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: "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. });

    后台处理程序

    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编码解码。可以用下面方法实验得出:

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

    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. });

    后台获取数据

    1. 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. }

    此种方法可以接受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为:

    "------webkitFormBoundaryB4I0wChQCc6LwykMrnContent-Disposition: form-data; name="id"rnrn001rn------WebKitFormBoundaryB4I0wChQCc6LwykMrnContent-Disposition: form-data; name="name"rnrn{"books":[{"language":"Java","edition":"second"},{"language":"C++","lastName":"fifth"},{"language":"C","lastName":"third"}]}rn------WebKitFormBoundaryB4I0wChQCc6LwykM--rn"

    进行url编码之后没有变化,为:

    "------WebKitFormBoundaryB4I0wChQCc6LwykMrnContent-Disposition: form-data; name="id"rnrn001rn------WebKitFormBoundaryB4I0wChQCc6LwykMrnContent-Disposition: form-data; name="name"rnrn{"books":[{"language":"Java","edition":"second"},{"language":"C  ","lastName":"fifth"},{"language":"C","lastName":"third"}]}rn------WebKitFormBoundaryB4I0wChQCc6LwykM--rn"

    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: "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. });

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

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

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

    例子:

    1. 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

    看完后就知道为什么要用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: "http://localhost:27110/test/formbody",
    9. cache: false,
    10. data: data,
    11. success: function (res) {
    12. }
    13. });
    14. });

    第二种:url

    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无关

                string name = HttpContext.Current.Request["F_CODE"];

    第二种:webapi参数绑定

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

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

    总结了一天的时间来搞post前台提交后台接受问题,基本用途够了,还需进一步理解,希望大牛斧正==

    脚本宝典总结

    以上是脚本宝典为你收集整理的form 表单和ajax中的post请求&&后台获取数据方法(深度好文)全部内容,希望文章能够帮你解决form 表单和ajax中的post请求&&后台获取数据方法(深度好文)所遇到的问题。

    如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

    本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
    如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。