.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;
        }

posted on 2018-04-17 23:19 高兴happy 阅读(1246) 评论(0) 收藏举报