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