好了,有了前页几节的铺垫,终于可以写点东西了。
下面带来get post的基本使用。
后台代码:
1 using System.Collections.Generic; 2 using System.Web.Http; 3 4 namespace WebApi2017.Controllers 5 { 6 7 [CrossSite] 8 public class ApiDemoController : ApiController 9 { 10 // GET 访问路径 {域名}/api/ApiDemo/Get 用于查询 11 public IEnumerable<string> Get() 12 { 13 return new string[] { "value1", "value11" }; 14 } 15 // GET 访问路径 {域名}/api/ApiDemo/Get2 用于查询 16 public IEnumerable<string> Get2() 17 { 18 return new string[] { "value2", "value22" }; 19 } 20 21 // GET 访问路径 {域名}/api/ApiDemo/Get/1 用于查询 22 public string Get(int id) 23 { 24 return "value1"; 25 } 26 // GET 访问路径 {域名}/api/ApiDemo/Get2/1 用于查询 27 public string Get2(int id) 28 { 29 return "value2"; 30 } 31 public string Get3(int id,string a,string b,string c) 32 { 33 return id+ "Get3" + a+b+c; 34 } 35 public class abc1{ 36 public int id { get; set; } 37 public string a { get; set; } 38 public string b { get; set; } 39 public string c { get; set; } 40 } 41 public string Post3(abc1 abc1) 42 { 43 return abc1.id + "post3" + abc1.a + abc1.b + abc1.c; 44 } 45 46 // Post 访问路径 {域名}/api/ApiDemo/Post {参数实体类} 用于新增 47 public void Post([FromBody]string value) 48 { 49 } 50 51 // Put访问路径 {域名}/api/ApiDemo/Put {参数实体类,要有一个id参数} 用于修改 52 public void Put(int id, [FromBody]string value) 53 { 54 } 55 56 // Put访问路径 {域名}/api/ApiDemo/Delete/1 用于删除 57 public void Delete(int id) 58 { 59 } 60 } 61 }
前台代码:
1 @{ 2 //Layout = null; 3 } 4 <!DOCTYPE html> 5 <html> 6 <head> 7 <meta name="viewport" content="width=device-width" /> 8 <title></title> 9 <script src="~/Scripts/jquery-1.10.2.min.js"></script> 10 <script> 11 var url1 = "http://" + window.location.host + "/api/apidemo"; 12 function submitbtn() { 13 $.ajax({ 14 url: url1 + "/get/1", 15 type: "GET", 16 success: function (data) { 17 $("#div1").html(data); 18 } 19 }); 20 } 21 function submitbtn2() { 22 $.getJSON(url1 + "/get2/1", function (data) { 23 $("#div1").html(data); 24 }) 25 } 26 function submitbtn3() { 27 $.ajax({ 28 url: url1 + "/get3", 29 type: "get", 30 data: { 31 id: 1, 32 a: "a1", 33 b: "b1", 34 c: "c1" 35 }, 36 success: function (data) { 37 $("#div1").html(data); 38 } 39 40 }) 41 } 42 function post3() { 43 $.ajax({ 44 url: url1 + "/post3", 45 type: "post", 46 data: { 47 id: 1, 48 a: "a1", 49 b: "b1", 50 c: "c1" 51 }, 52 success: function (data) { 53 $("#div1").html(data); 54 } 55 56 }) 57 } 58 59 </script> 60 </head> 61 <body> 62 <div> 63 <div id="div1"></div> 64 <input type="button" value="获取get方法" onclick="submitbtn()" /> 65 <input type="button" value="获取get2方法" onclick="submitbtn2()" /> 66 <input type="button" value="获取get3方法" onclick="submitbtn3()" /> 67 <input type="button" value="获取post3方法" onclick="post3()" /> 68 </div> 69 </body> 70 </html>
又上面代码可以看出get方法很简单,随便传几个参数都可以。
post的方法有点不一样,原因是public void Post([FromBody]string value) 看出post 需要一个整体,所以不能像get方法一样随意传参,最佳方法需要使用实体类来解决,前面我们讲过了,post一般用于新增方法,也是很方便的方法。