1. 实例
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Http; using System.Web.Http; using wxweb.Areas.API.Models; namespace wxweb.Areas.API.Controllers { public class ProductController : ApiController { Product[] products = new Product[] { new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 }, new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M }, new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M } }; Product[] products_post = new Product[] { new Product { Id = 1, Name = "name01", Category = "Category01", Price = 10 }, new Product { Id = 2, Name = "name02", Category = "Category02", Price = 20M }, new Product { Id = 3, Name = "name03", Category = "Category03", Price = 30M } }; /// <summary> /// get 无参数传参 /// </summary> /// <returns></returns> [HttpGet] public IEnumerable<Product> GetAllProducts() { return products; } /// <summary> /// get 单参数传参 /// </summary> /// <param name="id"></param> /// <returns></returns> [Route("api/Product/GetProductById")] [HttpGet] public IHttpActionResult GetProductById(string id) { var product = products.FirstOrDefault((p) => p.Id == Convert.ToInt32(id)); if (product == null) { return NotFound(); } return Ok(product); } /// <summary> /// get多参数传参 /// </summary> /// <param name="id"></param> /// <param name="name"></param> /// <returns></returns> [HttpGet] public string para_get_base(string id,string name) { return "id:"+id+" name:"+name; } /// <summary> /// get form传参 /// </summary> /// <param name="p"></param> /// <returns></returns> [Route("api/Product/para_get_form")] [HttpGet] public string para_get_form([FromUri]Product p) { return "p.Name:" + p.Name + " p.Price:" + p.Price; } /// <summary> /// post 无参数传参 /// </summary> /// <returns></returns> [Route("api/Product/GetProducts")] [HttpPost] public IEnumerable<Product> GetProducts() { return products_post; } /// <summary> /// post 单个参数传参 /// </summary> /// <param name="id"></param> /// <returns></returns> [Route("api/Product/GetProduct")] [HttpPost] public IHttpActionResult GetProduct([FromBody]string id) { var product = products_post.FirstOrDefault((p) => p.Id ==Convert.ToInt32( id)); if (product == null) { return NotFound(); } return Ok(product); } /// <summary> /// post 多参数传参 /// </summary> /// <param name="obj"></param> /// <returns></returns> [Route("api/Product/para_post_base")] [HttpPost] public string para_post_base(dynamic obj) { string id = obj["id"].ToString(); string name = obj["name"].ToString(); return "id:" + id + " name:" + name; } /// <summary> /// post form传参 /// </summary> /// <param name="p"></param> /// <returns></returns> [Route("api/Product/para_post_form")] [HttpPost] public string para_post_form(Product p) { return "p.Name:" + p.Name + " p.Price:" + p.Price; } /// <summary> /// post base+form传参 /// </summary> /// <param name="p"></param> /// <returns></returns> [Route("api/Product/para_post_baseform")] [HttpPost] public string para_post_baseform(dynamic obj) { var parapost = Convert.ToString(obj.parapost); Product p = Newtonsoft.Json.JsonConvert.DeserializeObject<Product>(Convert.ToString(obj.formdata)); return "parapost:"+parapost+ " p.Name:" + p.Name + " p.Price:" + p.Price; } /// <summary> /// post 数组参数 /// </summary> /// <param name="ids"></param> /// <returns></returns> [Route("api/Product/post_array")] [HttpPost] public string post_array(string[] ids) { string result = ""; for (int i = 0; i < ids.Length; i++) { result += " :" + ids[i]; } return result; } /// <summary> /// post 实体数组参数 /// </summary> /// <param name="ids"></param> /// <returns></returns> [Route("api/Product/post_ojblist")] [HttpPost] public string post_ojblist(List<Product> plist) { string result = ""; for (int i = 0; i < plist.Count; i++) { result +=" <br/>||"+i+ ":name:" + plist[i].Name+" price:"+plist[i].Price; } return result; } } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace wxweb.Areas.API.Models { public class Product { public int Id { get; set; } public string Name { get; set; } public string Category { get; set; } public decimal Price { get; set; } } }
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Product App</title> </head> <body> <div> <h2>All Products from get Method</h2> <ul id="products" /> </div> <div> <h2>Search by ID from get Method</h2> <input type="text" id="prodId" size="5" /> <input type="button" value="Search" onclick="find();" /> <p id="product" /> </div> <div style="border-top:1px solid #ccc;"> <h2>All Products from post Method</h2> <ul id="products_post" /> </div> <div> <h2>Search by ID from post Method</h2> <input type="text" id="prodId_post" size="5" /> <input type="button" value="Search" onclick="findpost();" /> <p id="product_post" /> </div> <div style="border-top:2px solid #ccc;"> <h3>多参数传参</h3> id:<input type="text" id="get_id" name="=get_id" /><br /> name:<input type="text" id="get_name" name="=get_name" /><br /> <input type="button" value="get传参" onclick="para_get_base()" /><br /> <span>get方式api调用结果</span> <span id="get_result"></span><br /> <input type="button" value="post传参" onclick="para_post_base()" /><br /> <span>post方式api调用结果</span><span id="get_result_post"></span><br /> </div> <div style="border-top:2px solid #ccc;"> <h3>实体传参</h3> <form id="form1"> base:<input type="text" id="parapost"><br /> Id:<input type="text" id="Id" name="Id" /><br /> Name:<input type="text" id="Name" name="Name" /><br /> Category:<input type="text" id="Category" name="Category" /><br /> Price:<input type="number" id="Price" name="Price" /><br /> </form> <input type="button" value="get form传参" onclick="para_get_form()" /><br /> <span>get方式api调用结果</span> <span id="get_result_form"></span><br /> <input type="button" value="post form传参" onclick="para_post_form()" /><br /> <span>post方式api调用结果</span> <span id="get_result_form_post"></span><br /> <input type="button" value="post base+form传参" onclick="para_post_baseform()" /><br /> <span>post base+form方式api调用结果</span> <span id="get_result_baseform_post"></span><br /> </div> <div style="border-top:2px solid #ccc;"> <h3>数组传参</h3> <input type="button" value="post数组传参" onclick="post_array()" /><br /> <span>post方式api调用结果</span><span id="post_array"></span><br /> </div> <div style="border-top:2px solid #ccc;"> <h3>实体集合</h3> <input type="button" value="post实体集合" onclick="post_ojblist()" /><br /> <span>post方式api调用结果</span><span id="post_ojblist"></span><br /> </div> <div style="margin-bottom:100px;"></div> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script> <script src="../Scripts/jquery.serializeObject.js"></script> <script type="text/javascript"> $(document).ready(function () { var uri = '/api/Product'; var para = ''; //get方式获取 $.get(uri, para, function (data) { $.each(data, function (key, item) { $('<li>', { text: formatItem(item) }).appendTo($('#products')); }); }) var uripost = '/api/Product/GetProducts'; //post方式获取 $.post(uripost, para, function (data) { $.each(data, function (key, item) { $('<li>', { text: formatItem(item) }).appendTo($('#products_post')); }); }) }); function formatItem(item) { return item.Name + ': $' + item.Price; } //使用get方式 单参数查询 function find() { var uri = '/api/Product/GetProductById'; var id = $('#prodId').val(); var para = { 'id': id }; //var uri = ''; $.get(uri, para, function (data) { $('#product').text(formatItem(data)); }) } //使用post方式 单参数查询 function findpost() { var uri = '/api/Product/GetProduct'; var id = $('#prodId_post').val(); var para = { '': id };//注意传递参数的参数名称，填'' //var uri = ''; $.post(uri, para, function (data) { $('#product_post').text(formatItem(data)); }) } //get方式多参数传参 function para_get_base() { var uri = '/api/Product'; var id = $('#get_id').val(); var name = $('#get_name').val(); var para = { id: id, name: name }; $.ajax({ url: uri, type: 'get', async: true, data: para, dataType: 'text', success: function (r) { $('#get_result').html(r); }, error: function (r) { console.log(r); } }); } //post方式多参数传参 function para_post_base() { var uri = '/api/Product/para_post_base'; var id = $('#get_id').val(); var name = $('#get_name').val(); var para = { id: id, name: name }; para = JSON.stringify(para);//js对象转化为字符传递 $.ajax({ url: uri, type: 'post', async: true, data: para, dataType: 'text', contentType: "application/json", success: function (r) { $('#get_result_post').html(r); }, error: function (r) { console.log(r); } }); } //get方式传递form参数 function para_get_form() { var uri = '/api/Product/para_get_form'; //参数方式1，借助serializeObject 将form序列化为json对象 var para = $('#form1').serializeObject(); //参数方式2，依次写出每一个参数值 var para2 = { Id: $('#Id').val(), Name: $('#Name').val(), Category: $('#Category').val(), Price: $('#Price').val() };//参数方式2， $.ajax({ url: uri, type: 'get', async: true, data: para, contentType: "application/json", dataType: 'text', success: function (r) { $('#get_result_form').html(r); }, error: function (r) { alert(r); } }); } //post方式传递form参数 function para_post_form() { var uri = '/api/Product/para_post_form'; //参数方式1，借助serializeObject 将form序列化为json对象 var para = $('#form1').serializeObject(); //参数方式2，依次写出每一个参数值 var para2 = { Id: $('#Id').val(), Name: $('#Name').val(), Category: $('#Category').val(), Price: $('#Price').val() };//参数方式2， $.ajax({ url: uri, type: 'post', async: true, data: para, dataType: 'text', success: function (r) { $('#get_result_form_post').html(r); }, error: function (r) { alert(r); } }); } //post方式传递form参数 function para_post_baseform() { var uri = '/api/Product/para_post_baseform'; //参数方式1，借助serializeObject 将form序列化为json对象 var formdata = $('#form1').serializeObject(); var para = JSON.stringify({ parapost: $('#parapost').val(), formdata: formdata }) $.ajax({ url: uri, type: 'post', async: true, data: para, dataType: 'text', contentType: "application/json", success: function (r) { $('#get_result_baseform_post').html(r); }, error: function (r) { alert(r); } }); } function post_array() { var arr = ["1", "2", "3", "4"]; var para = JSON.stringify(arr); var uri = '/api/Product/post_array'; $.ajax({ type: "post", url: uri, contentType: 'application/json', data: para, dataType: 'text', success: function (data) { $('#post_array').html(data); }, error: function (data) { console.log(data); } }); } function post_ojblist() { var arr = [ { Id: 1, Name: "Jim", Category: "001", Price:10 }, { Id: 2, Name: "jack", Category: "002", Price: 20 }, { Id: 3, Name: "tom", Category: "003", Price: 30 } ]; var para = JSON.stringify(arr); var uri = '/api/Product/post_ojblist'; $.ajax({ type: "post", url: uri, contentType: 'application/json', data: para, dataType: 'text', success: function (data, status) { if (status) { $('#post_ojblist').html(data); } else { console.log(data); } }, error: function (data) { console.log(data); } }); } </script> </body> </html>
//
// Use internal $.serializeArray to get list of form elements which is
// consistent with $.serialize
//
// From version 2.0.0, $.serializeObject will stop converting [name] values
// to camelCase format. This is *consistent* with other serialize methods:
//
// - $.serialize
// - $.serializeArray
//
// If you require camel casing, you can either download version 1.0.4 or map
// them yourself.
//
(function($){
$.fn.serializeObject = function () {
"use strict";
var result = {};
var extend = function (i, element) {
var node = result[element.name];
// If node with same name exists already, need to convert it to an array as it
// is a multi-value field (i.e., checkboxes)
if ('undefined' !== typeof node && node !== null) {
if ($.isArray(node)) {
node.push(element.value);
} else {
result[element.name] = [node, element.value];
}
} else {
result[element.name] = element.value;
}
};
$.each(this.serializeArray(), extend);
return result;
};
})(jQuery);
2. get 请求
1>：实体作为参数调用时，前台的实体参数无法直接传递到后台，需在webapi中对实体参数加上[FromUri]特性说明。
这是因为通过get方式传递的参数都是通过Request URL传递到后台的，则FromUri 给api说明 参数是从Request URL中获取到的。
如下：
/// <summary> /// get form传参 /// </summary> /// <param name="p"></param> /// <returns></returns> [Route("api/Product/para_get_form")] [HttpGet] public string para_get_form([FromUri]Product p) { return "p.Name:" + p.Name + " p.Price:" + p.Price; }
//get方式传递form参数
function para_get_form() {
var uri = '/api/Product/para_get_form';
//参数方式1，借助serializeObject 将form序列化为json对象
var para = $('#form1').serializeObject();
//参数方式2，依次写出每一个参数值
var para2 = { Id: $('#Id').val(), Name: $('#Name').val(), Category: $('#Category').val(), Price: $('#Price').val() };//参数方式2，
$.ajax({
url: uri,
type: 'get',
async: true,
data: para,
contentType: "application/json",
dataType: 'text',
success: function (r) {
$('#get_result_form').html(r);
}, error: function (r) {
alert(r);
}
});
}
2> 如果不想通过[FromUri]特性说明的方式进行传递实体，也可以使用把实体先序列化在反序列化的方式传递。
$.ajax({ type: "get", url: "http://localhost:27221/api/Charging/GetByModel", contentType: "application/json", data: { strQuery: JSON.stringify({ ID: "1", NAME: "Jim", CREATETIME: "1988-09-11" }) }, success: function (data, status) { if (status == "success") { $("#div_test").html(data); } } }); [HttpGet] public string GetByModel(string strQuery) { TB_CHARGING oData = Newtonsoft.Json.JsonConvert.DeserializeObject<TB_CHARGING>(strQuery); return "ChargingData" + oData.ID; }
get 方式总结
(1)Get参数传递的本质是url字符串拼接；
(2)url字符串长度受限制；
(3)Get参数传递在Http请求头部传递，而不支持Request-Body传递；
(4)Get类型的方法支持参数为基本类型，不支持实体类型；
(5)Get类型的方法命名，应尽量采用“Get+方法名”的命名方式，且习惯性地在方法前加上[HttpGet特性]；
(6)实参与形参的匹配，遵循路由规则；
(7)Get对应DB的Select操作，从这一点来理解，就知道为什么Http不支持实体对象传递的合理性了，因为一般情况，我们都是通过简单的字段查询信息(对应基本类型)，
如ID号，用户名等，而不会通过一个实体查询数据；
3 post 请求
1> post 单参数请求
我们一般的通过url取参数的机制是键值对，即某一个key等于某一个value，而这里的FromBody和我们一般通过url取参数的机制则不同，它的机制是=value，没有key的概念，并且如果你写了key(比如你的ajax参数写的{id:"1"})，后台反而得到的id等于null。
//使用post方式 单参数查询 function findpost() { var uri = '/api/Product/GetProduct'; var id = $('#prodId_post').val(); var para = { '': id };//注意传递参数的参数名称，填'' //var uri = ''; $.post(uri, para, function (data) { $('#product_post').text(formatItem(data)); }) } /// <summary> /// post 单个参数传参 /// </summary> /// <param name="id"></param> /// <returns></returns> [Route("api/Product/GetProduct")] [HttpPost] public IHttpActionResult GetProduct([FromBody]string id) { var product = products_post.FirstOrDefault((p) => p.Id ==Convert.ToInt32( id)); if (product == null) { return NotFound(); } return Ok(product); }
2> 多参数请求
post方式是不支持多参数方式请求的，为了传递多参数我们可以采用其他的方式。
比如，在后台建立对象实体，然后将整个实体作为对象传递，
//post方式传递form参数 function para_post_form() { var uri = '/api/Product/para_post_form'; //参数方式1，借助serializeObject 将form序列化为json对象 var para = $('#form1').serializeObject(); //参数方式2，依次写出每一个参数值 var para2 = { Id: $('#Id').val(), Name: $('#Name').val(), Category: $('#Category').val(), Price: $('#Price').val() };//参数方式2， $.ajax({ url: uri, type: 'post', async: true, data: para, dataType: 'text', success: function (r) { $('#get_result_form_post').html(r); }, error: function (r) { alert(r); } }); } /// <summary> /// post form传参 /// </summary> /// <param name="p"></param> /// <returns></returns> [Route("api/Product/para_post_form")] [HttpPost] public string para_post_form(Product p) { return "p.Name:" + p.Name + " p.Price:" + p.Price; }
html页面中如果使用form序列化的方式，可以调用serializeObject.js的方法得到json对象。
比如，使用dynamic参数，动态的获取所需要的参数。
//post方式多参数传参 function para_post_base() { var uri = '/api/Product/para_post_base'; var id = $('#get_id').val(); var name = $('#get_name').val(); var para = { id: id, name: name }; para = JSON.stringify(para);//js对象转化为字符传递 $.ajax({ url: uri, type: 'post', async: true, data: para, dataType: 'text', contentType: "application/json", success: function (r) { $('#get_result_post').html(r); }, error: function (r) { console.log(r); } }); } /// <summary> /// post 多参数传参 /// </summary> /// <param name="obj"></param> /// <returns></returns> [Route("api/Product/para_post_base")] [HttpPost] public string para_post_base(dynamic obj) { string id = obj["id"].ToString(); string name = obj["name"].ToString(); return "id:" + id + " name:" + name; }
post 方式总结
(1)Post参数传递本身是在Request-Body内传递，而Get参数传递本质是url拼接；
(2)Post参数传递不是key/value形式，而Get参数是key/value形式；
(3)Post传递参数时，无论是单个参数还是对象，均借助[FromBody]特性(当然，某些情况去掉[FromBody]特性也可把值传递进去，但为了规范化，尽量加上该特性)；
(4)Post没长度限制，而Get有长度限制(一般为1024b);
(5)Post相对Get，较安全；
(6)Post操作相当于DB的Insert操作；
4 总结
1.虽然HTTP请求方法有20多种，常用的大致为4种，即Get，Post，Put，Delete（当然，像Trace，Head等也常用）；
2.Get，Post，Put，Delete分别对应DB的Select,Insert，Update和Delete操作；
3.WebApi参数类型，大致分为基本数据类类型和对象数据类型(当然你也可以理解为抽象数据类型)；
4.研究WebApi参数传递，只需研究Get和Post即可，因为其他http方法参数传递基本都是有这两种组合而成(如Put有Get和Post组合而成)，或者相似（如Delete与Get相似)；
5.对于控制器方法，尽量参照规范格式写，如在相应控制器方法上加上对应的htt请求(Get对应[HttpGet]，Post对应[HttpPost])，方法名尽量采用“Http请类型+方法名”格式(如Get请求，建议采用Get+MethodName；Post请求对应Post+MethodName);
6.WebApi参数请求，大致分为两大类型，即Request-url和Request-body;
引用：