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

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

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

下面上代码

页面代码

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Api</title>

</head>

<body>

    <h2>ApiTest</h2>

    <label id="lan"></label>

    <hr />

    <form id="formSchool" name="formSchool" >

        <table>

            <tr><td> ShoolId： </td><td><input type="text" value="" name="ShoolId" /></td></tr>

            <tr><td>SchoolCode：</td><td><input type="text" value="" name="SchoolCode" /></td></tr>

            <tr><td>SchoolName：</td><td><input type="text" value="" name="SchoolName" /></td></tr>

            <tr><td>SchoolAddress：</td><td><input type="text" value="" name="SchoolAddress" /></td></tr>

            <tr><td>SchoolLogo：</td><td><input type="text" value="" name="SchoolLogo" /></td></tr>

            <tr><td>State：</td><td><input type="text" value="" name="State" /></td></tr>

        </table>

        <input type="button" onclick="SubmitSchool()" value="调用" />

    </form>

    <hr />

    <script src="/js/jquery-1.10.2.min.js"></script>

    <script src="/js/jquery.form.js"></script>

    <script>

        function SubmitSchool() {

            alert("数据获取中")

            $.ajax({

                cache: true,

                type: "POST",

                contentType: "application/json",

                url: "/api/CommonSchool",

                data:$('#formSchool').serializeObject(),// 你的formid

                dataType: "json",

                async: false,

                beforeSend: function (request) {

                    //request.setRequestHeader("token", $("#token").val());

                },

                error: function (request) {

                    console.log(request);

                    alert(request);

                },

                success: function (data) {

                    alert("数据获取成功")

                    $("#lan").text(JSON.stringify(data));

                }

            });

        }

        //将Form 表单转换为Json字符串

        $.fn.serializeObject = function () {

            var o = {};

            var a = this.serializeArray();

            $.each(a, function () {

                if (o[this.name] !== undefined) {

                    if (!o[this.name].push) {

                        o[this.name] = [o[this.name]];

                    }

                    o[this.name].push(this.value || '');

                } else {

                    o[this.name] = this.value || '';

                }

            });

            //o 为Json对象

            return JSON.stringify(o);

        };

    </script>

</body>

</html>

接口获取

 /// <summary>

        /// CommonShool

        /// </summary>

        /// <param name="commonShool">和接口对应的实体对象</param>

        /// <returns></returns>

        [HttpPost]

        public Registration.ApiModels.CommonShool AddSchools([FromBody]Registration.ApiModels.CommonShool commonShool)

        {

            return commonShool;

        }

.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. ML.NET---.NET下的机器学习引擎（简介）

    ML.NET 是一个跨平台的开源机器学习框架,它可以使 .NET 开发人员更容易的开展机器学习工作. ML.NET 允许 .NET 开发人员开发自己的模型,即使没有机器学习的开发经验,也可以很容易的将 ...

  2. layui与多级联动返填

    <script> layui.use(['form', 'layer'], function () { $ = layui.jquery; var form = layui.form() ...

  3. Android Get方式发送信息

    程序需要用到Internet权限,所以需要在AndroidManifest.xml添加 <uses-permission android:name="android.permissio ...

  4. 引用HM.Util.Ioc 的时候报错

    引用HM.Util.Ioc 的时候报错 错误:The type name or alias SqlServer could not be resolved. Please check your con ...

  5. Robot Framework连接MySQL数据库

    注:内容来自网络,整理之如下 Robot Framework连接mysql数据库需要: 1.安装databaselibrary.pymysql 通过cmd命令执行:pip install robotf ...

  6. OCP 12c最新考试原题及答案（071-6）

    6.(4-21) choose the best answer: View the Exhibit and examine the structure of the CUSTOMERS table. ...

  7. 编译的 Ruby 2.3.0 缺少 openssl 支持的解决方法 (已解决)

    我的系统是centos 7.5,已离线安装ruby-2.3.0,openssl-1.0.2l,rubygems-2.7.4 如下图: 但是在  gem sources -a http://gems.r ...

  8. 性能测试—JMeter 常用元件（二）

    性能测试—JMeter 常用元件(二) <零成本web性能测试>第三章 Web性能测试脚本录制与开发中JMeter常用测试元件 测试计划描述了JMeter运行时将会执行的一系列步骤,一个完 ...

  9. 数据库表的约束constraints

    数据库表的约束constraints 数据完整性约束 表的数据有一定的取值范围和联系,多表之间的数据有时也有一定的参照关系. 在创建表和修改表时,可通过定义约束条件来保证数据的完整性和一致性. 约束条 ...

  10. SpringBoot 整合 ActiveMq

    消息队列,用来处理开发中的高并发问题,通过线程池.多线程高效的处理并发任务. 首先,需要下载一个ActiveMQ的管理端:我本地的版本是 activemq5.15.8,打开activemq5.15.8 ...