随着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. C#线程/进程同步（lock、Mutex、Semaphore）

    一.lock(实质是Monitor.Enter和Monitor.Exit)(线程同步) 二.Mutex(互斥量)(线程/进程同步) Mutex有个好的特性是,如果程序结束时而互斥锁没通过Release ...

  2. docker swarm 命令

    初始化swarm manager并制定网卡地址 docker swarm init --advertise-addr 192.168.10.117 强制删除集群,如果是manager,需要加–forc ...

  3. Sublime Text3 最新版3207 安装及破解

    注:原文地址 https://www.abbeyok.com/archives/337 Sublime Text 3最近更新了新版本,最新版本:3207,之前的license无效了,新版破解方法如下: ...

  4. vector迭代器失效的几种情况

    在泛型编程还是STL的实际运用中,迭代器(iterator)无疑扮演者重要的角色.迭代器是一种类似于指针的对象(如可以内容提领,成员访问等),但他又不仅仅是一种普通的指针.关于迭代器失效,我们可以看下 ...

  5. >>> 主页链接

    服 务 & SDK 网易云信|真正稳定的IM即时通讯云服务 微信小程序开发工具下载 百度LBS开放平台 ( 百度地图API示例) 微信JSSDK说明文档 (在线demo) 园 友 京东开涛 W ...

  6. P2300 合并神犇

    题目链接 题意分析 首先这道题不可以使用简单的贪心来做 根据\(DP\) 我们令\(dp[i]\)表示当前到了\(i\)一共做了\(dp[i]\)次合并 \(pre[i]\)表示当前合并到了\(i\) ...

  7. c++ Initialization

    c++ 的初始化过程比较复杂:根据对象的storage duration来分类.所谓storage duration是对象而言的,Storage duration is the property of ...

  8. 利用腾讯云为你的域名申请并配置免费SSL一年

    我想,点进来的朋友,应该都知道SSL的重要性吧.这里就简单提一下,大型网站域名只有配置了SSL后,才会更加安全. 现在,微信小程序也开始要求后台必须是SSL配置后的域名了.说了这么多,估计有些人还是有 ...

  9. C#-★★函数★★

    一个较大的程序一般应分为若干个程序块,每一个模块用来实现一个特定的功能.所有的高级语言中都有子程序这个概念,用子程序来实现模块的功能.在C#语言中,子程序的作用是由一个主函数和若干个函数构成.由主函数 ...

  10. POJ 2253-Frogger（最小生成树的最大权）

    原题链接:点击此处 题意: 一只叫Freddy的青蛙蹲坐在湖中的一块石头上.突然他发现一只叫Fiona的青蛙在湖中的另一块石头上.Freddy想要跟Fiona约会,但由于湖水太脏,他不想游泳过去而是跳 ...