随着it的技术发展，目前越来越多的项目采用前后端分离的开发模式，通过webapi提供接口数据来进行交互

最近项目用的是.netCore WebApi，在最近的项目使用中发现一些问题，进行记录。个人简介不一定全面

在进行webapi开发中经常会遇到整个表单的数据提交，在接口处可以定义实体对象来接收数据，但是在参数传递的时候需要注意的是，传递的数据是Json字符串格式，而不是Json对象（如果是Json对象的话，表单会获取为null）

下面上代码

页面代码

  1. <!DOCTYPE html>
  2.  
  3. <html>
  4. <head>
  5.     <meta name="viewport" content="width=device-width" />
  6.     <title>Api</title>
  7. </head>
  8. <body>
  9.     <h2>ApiTest</h2>
  10.     <label id="lan"></label>
  11.     <hr />
  12.  
  13.     <form id="formSchool" name="formSchool" >
  14.         <table>
  15.             <tr><td> ShoolId： </td><td><input type="text" value="" name="ShoolId" /></td></tr>
  16.             <tr><td>SchoolCode：</td><td><input type="text" value="" name="SchoolCode" /></td></tr>
  17.             <tr><td>SchoolName：</td><td><input type="text" value="" name="SchoolName" /></td></tr>
  18.             <tr><td>SchoolAddress：</td><td><input type="text" value="" name="SchoolAddress" /></td></tr>
  19.             <tr><td>SchoolLogo：</td><td><input type="text" value="" name="SchoolLogo" /></td></tr>
  20.             <tr><td>State：</td><td><input type="text" value="" name="State" /></td></tr>
  21.         </table>
  22.         <input type="button" onclick="SubmitSchool()" value="调用" />
  23.     </form>
  24.     <hr />
  25.     <script src="/js/jquery-1.10.2.min.js"></script>
  26.     <script src="/js/jquery.form.js"></script>
  27.     <script>
  28.         function SubmitSchool() {
  29.  
  30.             alert("数据获取中")
  31.             $.ajax({
  32.                 cache: true,
  33.                 type: "POST",
  34.                 contentType: "application/json",
  35.                 url: "/api/CommonSchool",
  36.                 data:$('#formSchool').serializeObject(),// 你的formid
  37.                 dataType: "json",
  38.                 async: false,
  39.                 beforeSend: function (request) {
  40.                     //request.setRequestHeader("token", $("#token").val());
  41.                 },
  42.                 error: function (request) {
  43.                     console.log(request);
  44.                     alert(request);
  45.                 },
  46.                 success: function (data) {
  47.                     alert("数据获取成功")
  48.                     $("#lan").text(JSON.stringify(data));
  49.                 }
  50.             });
  51.  
  52.         }
  53.  
  54.         //将Form 表单转换为Json字符串
  55.         $.fn.serializeObject = function () {
  56.             var o = {};
  57.             var a = this.serializeArray();
  58.             $.each(a, function () {
  59.                 if (o[this.name] !== undefined) {
  60.                     if (!o[this.name].push) {
  61.                         o[this.name] = [o[this.name]];
  62.                     }
  63.                     o[this.name].push(this.value || '');
  64.                 } else {
  65.                     o[this.name] = this.value || '';
  66.                 }
  67.             });
  68.             //o 为Json对象
  69.             return JSON.stringify(o);
  70.         };
  71.     </script>
  72. </body>
  73. </html>

接口获取

  1.  /// <summary>
  2.         /// CommonShool
  3.         /// </summary>
  4.         /// <param name="commonShool">和接口对应的实体对象</param>
  5.         /// <returns></returns>
  6.         [HttpPost]
  7.         public Registration.ApiModels.CommonShool AddSchools([FromBody]Registration.ApiModels.CommonShool commonShool)
  8.         {
  9.             return commonShool;
  10.         }

.netCore2.0 WebApi 传递form表单的更多相关文章

  1. c#WebApi使用form表单提交excel，实现批量写入数据库

    思路:用户点击下载模板按钮,获取到excel模板,然后向里面填写数据保存.from表单提交的时候选择保存好的excel,实现数据的批量导入过程 先把模板放在服务器的项目目录下面:如 模板我一般放在:F ...

  2. Element Form表单实践（上）

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

  3. Element Form表单实践（下）

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

  4. React-Antd4的Form表单校验

    之前很少用react做项目,最近入职新公司,用的react,在自己的摸索过程中,慢慢会记录一些使用方法.今天简单记录一下使用antd 4.0版本的Form表单校验,直接代码. 需要购买阿里云产品和服务 ...

  5. Liferay7 BPM门户开发之40: Form表单的Action到Render的数据传递

    在Form提交后的变量,很多情况是要展现在jsp页面中,这时Action到Render的变量传递就非常有用. 例如,您在数据库中添加了学生的详细信息. 为了实现这一需求,先创建Form表单(学生的细节 ...

  6. ajax传递数组、form表单提交对象数组

    在JSP页面开发中,我们常常会用到form表单做数据提交,由于以前一直只是使用form表单提交单个对象,只要表单文本域的name值和接收的对象的属性名一致,那么传值就没有什么问题.不过,在前几天的开发 ...

  7. form表单传递对象数组

    ajax传递数组.form表单提交对象数组 在JSP页面开发中,我们常常会用到form表单做数据提交,由于以前一直只是使用 form表单提交单个对象,只要表单文本域的name值和接收的对象的属性名一致 ...

  8. Ajax（form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传）

    form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multi ...

  9. thinkPHP5.0使用form表单提交数据和删除文章，不用TP的提示页面，使用弹出提示信息

    form表单提交数据和删除文章时,TP的默认信息提示页面的看起来不是很好看,想要实现弹窗提示怎么做呢? 前端:可以使用前端的一个知识--iframe,iframe元素会创建包含另外一个文档的内联框架: ...

随机推荐

  1. Linux下开放指定端口

    今天Linux测试服务器重启了下 结果导致网站打不开了,ip也能ping通 Apache重启成功,telnet了下80端口结果连不上,这就应该是外网80被防火墙拦截了 后面把80端口开发了下可以了,步 ...

  2. SQL Server 2008R2 附件数据库问题记录

    在Sql Server 2008 R2里附加数据库时弹出xxx.mdf拒绝访问的错误 详细错误信息如下: TITLE: Microsoft SQL Server Management Studio-- ...

  3. 「HNOI 2013」消毒

    题目链接 戳我 \(Solution\) 我们首先想一想如果这一题只是二维的该怎么办? 就是一个最小点覆盖问题.这里就不详细解释了,用网络流或匈牙利都无所谓. 但现在是三维的,那么现在该如何处理呢? ...

  4. “全栈2019”Java第三十二章：增强for循环Foreach语法

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  5. django数据模型中关于on_delete的使用

    django数据模型中关于on_delete的使用 class BookModel(models.Model): """ 书籍表 """ b ...

  6. scrapy框架基础

    一.简介 Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架,非常出名,非常强悍.所谓的框架就是一个已经被集成了各种功能(高性能异步下载,队列,分布式,解析,持久化等)的具有很强通用性 ...

  7. php数据库编程---mysqli扩展库

    1,mysqli扩展库允许我们访问MySQL数据库,并对MySql数据库进行curd操作.Mysqli扩展库比mysql扩展库加强了. 2,mysqli扩展库和mysql扩展库的比较 (1) mysq ...

  8. java内存模型（jMM）(一)

    在说java的内存模型之前先简单的了解计算机的主存和缓存的相关概念. 多任务和高并发是衡量一台计算机处理器的重要指标.一般衡量一个服务器性能的高低好坏,使用每秒事务处理数(Transactions P ...

  9. uC/OS-II 函数之邮箱管理相关函数

    上文主要介绍了消息队列相关的函数,本文介绍邮箱管理相关的函数:OSMboxCreate()建立一个邮箱,OSMboxDel()删除一个邮箱,OSMboxPend()等待邮箱中的消息,OSMboxPos ...

  10. php中模拟post，get请求和接受请求详细讲解

    在php中我们经常用到curl拓展来进行模拟post.get请求,下面就来具体说说怎么模拟: 一.首先模拟post请求: function http_post_data($url, $query_da ...