随着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. .net core 高性能对象映射

    关于对象转换已经有不少轮子(AutoMapper,TinyMapper) .出于项目需要,手动造一个简单轮子.先贴代码 1.采用静态泛型类缓存,避免了拆箱装箱操作. 2.对于转换对象中有,字段名一样但 ...

  2. ASP 缓存处理及URL 重写

    1 缓存 1.1.1 <%--通过设置VaryByParam =" VaryByParam ="none" %> 1.1.2 <%--带参数缓存,只要包 ...

  3. python---Numpy模块中数组运算的常用代码示例

    import numpy as np # Numpy数组操作 print('========访问列表元素, 切片,赋值===========') arr = np.array([2., 6., 5., ...

  4. WEB新手之do u know caidao?

    继续写题. 进入该网站,可以看到显然题目给出了一个假的flag.再看第二句话,说题目里存在shell.于是用御剑扫描一下后台. 如上图所示,扫出了一个叫shell的包.于是常识性地在URL加上shel ...

  5. SpringMVC 的初理解

    项目中用到了jetty,springboot两种构建服务器的方式,jetty是一种嵌入式的方式,部署启动都很灵活,springboot最大的优点就是很多配置文件都自己集成好了,虽然用了这么多好的框架, ...

  6. 阿里java开发规范学习(附P3C IDEA插件 帮助规范的养成)

    浅析 阿里巴巴 Java 开发规约 (未完成) 更加优秀的页面展现请到浅析 阿里巴巴 Java 开发规约 contents 为什么要学 编程规约 P3C IDEA 插件 why-use 我们知道,一般 ...

  7. Python+selenium 模拟wap端页面操作

    from selenium.webdriver.chrome.options import OptionsmobileEmulation = {'deviceName': 'iPhone X'}opt ...

  8. 获取指定<文字行数>的<高度>是多少 TextKit

    - (CGSize)maxLineSizeWithLines:(NSInteger)lines constraintSize:(CGSize)size attributes:(NSDictionary ...

  9. [NodeJS]Jenkins-cli

    使用npm 包nestor 触发jenkins job, 达到命令行管理Jenkins功能. 1. install nestor : npm install -g nestor 2. set JENK ...

  10. PostMan --API调试工具

    https://blog.csdn.net/fxbin123/article/details/80428216