zoukankan      html  css  js  c++  java
  • .netCore2.0 WebApi 传递form表单

    随着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="1" name="ShoolId" /></td></tr>
                <tr><td>SchoolCode:</td><td><input type="text" value="2" name="SchoolCode" /></td></tr>
                <tr><td>SchoolName:</td><td><input type="text" value="3" name="SchoolName" /></td></tr>
                <tr><td>SchoolAddress:</td><td><input type="text" value="4" name="SchoolAddress" /></td></tr>
                <tr><td>SchoolLogo:</td><td><input type="text" value="5" name="SchoolLogo" /></td></tr>
                <tr><td>State:</td><td><input type="text" value="6" 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;
            }
  • 相关阅读:
    Android Intent Service
    Android-Window(一)——初识Window
    立FLAG-书单
    Typecho-Material主题不支持Kotlin代码高亮的解决方案
    【翻译】What is State Machine Diagram(什么是状态机图)?
    【翻译】 What is class diagram(什么是类图)?
    Android-Selector不起作用
    git 命令
    远程分支回退方法
    mac 显示隐藏文件
  • 原文地址:https://www.cnblogs.com/happygx/p/8870791.html
Copyright © 2011-2022 走看看