前端通过ajax请求,调用net core webapi接口
一、前段HTML
1、引入jquery文件:https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js
2、编写js事件,事件触发时调用该ajax请求。
2.1、jquery封装了一个ajax的方法。参数是一个对象。这个对象包含以下属性:
请求地址:URL: 'http://IP地址/端口/接口地址'
请求方式:type:'get/post/put/delete'
请求数据类型:datatype: 'json'
请求数据:data: '{uname: "zhangsan", pwd:'123456'}'
请求回调函数:success function(data){}, error function(data){}
以上代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> </head> <body> <input type="text" id="name"/> <input type="text" id="age"/> <input type="button" id="btnCommit" onclick="ajaxFunc()" value="button"/> <input type="button" id="btnClear" value="Clear"> </body> <script> function ajaxFunc() { $.ajax({ url: "http://localhost:53179/api/values/post", type: 'post', dataType: 'json', data: {id:22}, success: function (res) { console.log(res) if(res!=null){ $('#name').attr('value',res.username); $('#age').attr('value',res.age); } }, error function(res){ console.log(res); }, complete function(status){ console.log(res); } }) }; $('#btnClear').on('click',function(){ $('#name').val(""); $('#age').val(""); }); </script> </html>
后端net core web api
1、创建一个工程项目之后,添加一个控制器继承Controller
1.1编写接口(这里没有使用数据库),主要是测试前端请求之后能否执行调用该接口
2、调试接口正常,但是会发现,前段调用的时候会出现跨域问题。
解决如下:在startup类配置跨域
services.AddCors(options => options.AddPolicy("DomainKYHttp", builder => builder.AllowAnyMethod() .AllowAnyHeader() .AllowAnyOrigin() .AllowCredentials()));
最后运行后台代码,使用浏览器打开第一步创建的html。测试成功