随着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. 零散知识点总结(持续更新……)

        这篇博客用于记录平时学习中遇到的零散的知识点,它们不适于单独写一篇长博客,在这里记录下来一是为了增强记忆,二是为了方便复习总结.这篇博客会持续更新... 一.JS数据类型及类型判断 1. JS ...

  2. BZOJ 1562 [NOI2009] 变换序列

    [NOI2009] 变换序列 [题解] 就是有一个序列,每个位置可以填两个数,不可重复,问最小字典序. 显然,可以建一个二分图,判合法就是找完美匹配. 那怎么弄最小字典序呢?有好多种解法,我这里给出了 ...

  3. 关键字的使用 pass break continue

    # ### 关键字的使用 # (1)pass 过 作用 作站位用的 if 5==5: pass i = 0 while i <5: pass #约定俗成,在循环里面什么也不行的情况下,给友好提示 ...

  4. [ActionScript 3.0] AS3 弹性运动

    package com.views { import flash.display.Sprite; import flash.events.Event; import flash.geom.Point; ...

  5. Java 之封装

    预备知识: public:可以被所有其他类所访问 private:只能被自己访问和修改 protected:自身.子类及同一个包中类可以访问 default:同一包中的类可以访问,声明时没有加修饰符, ...

  6. Jmeter-从数据库中获取数据并作为变量传输

    再今天重新学习,从数据库中取数据,并作为变量传到下一个请求中. 首先第一步要导入mysql驱动包 一.添加JDBC Connection Configuration 设置链接 Database URL ...

  7. svn命令行的使用

    只是说一下,svn平时工作时常用的命令 1.svn delete 目录 删除svn版本里的相关目录 2.svn add 目录 将本地的目录添加到svn版本信息里 3.svn commit 目录 提交s ...

  8. 【算法】禁忌搜索算法(Tabu Search，TS)超详细通俗解析附C++代码实例

    01 什么是禁忌搜索算法? 1.1 先从爬山算法说起 爬山算法从当前的节点开始,和周围的邻居节点的值进行比较. 如果当前节点是最大的,那么返回当前节点,作为最大值 (既山峰最高点):反之就用最高的邻居 ...

  9. POJ3322Bloxorz I

    POJ3322 Bloxorz I 暴搜,next数组与处理一下(小技巧) #include <cstdio> #include <iostream> #include < ...

  10. eclipse项目目录展示结构设置

    我因为前后端都搞过, 解除过很多的开发IDE,说真的,很多的项目目录结构都是一级一级分开,然后我可以通过展开等操作来查看文件等资源信息,结果呢?java的开发IDE eclipse默认的项目目录展示简 ...