随着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; }