随着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. ubuntu 中安装 Redis

    1.下载安装root@21ebdf03a086:/# apt-cache search redisroot@21ebdf03a086:/# apt-get install redis-server a ...

  2. ZKEACMS 模板组件扩展

    前言 如果你还不知道ZKEACMS,不妨先了解一下. ASP.NET MVC 开源建站系统 ZKEACMS 推荐,从此网站“拼”起来 官方地址:http://www.zkea.net/zkeacms ...

  3. Nginx自定义扩展模块

    1. 概述 参考 Nginx开发HTTP模块入门 2. 扩展模块(假设根目录名称为nginx) nginx/configure文件中可以修改配置文件路径(编译时使用): 例如像把配置文件从默认的ngi ...

  4. 谈谈iOS开发如何写个人中心这类页面--静态tableView页面的编写

    本文来自 网易云社区 . 一.本文讲的是什么问题? 在开发 iOS 应用时,基本都会遇到个人中心.设置.详情信息等页面,这里截取了某应用的详情编辑页面和个人中心页面,如下: 我们以页面结构的角度考虑这 ...

  5. IO模型《三》非阻塞IO

    非阻塞IO(non-blocking IO) Linux下,可以通过设置socket使其变为non-blocking.当对一个non-blocking socket执行读操作时,流程是这个样子: 从图 ...

  6. idea maven新建struts2项目

    环境: IDEA java1.8 struts2-core  2.5.18 一路下一步,名字自己随便填, 项目建好后修改pom.xml文件,加入struts2-core 添加tomcat: +号添加w ...

  7. Echart自定义y轴刻度信息1

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. secureCRT颜色方案设置

    按照如下设置后vim编辑会有如下颜色提示

  9. 使用ceph-deploy进行ceph安装

    ceph安装包介绍: 1.ceph-deploy: ceph的部署软件,通过该软件可以简便部署,这个软件并非整个ceph集群系统中必须的 2.ceph: ceph整个服务集群中的每个节点必须的软件.提 ...

  10. flask内置函数 send_static_file(filename)

    内部使用的函数将静态文件从静态文件夹发送到浏览器. current_app.send_static_file(filename)