這兩天在做的一個項目基於webapi2,期間遇到了復雜參數傳遞的問題。其中剛好看到園友的這篇文章,但是我測試收結果是失敗的,還不知道是什么原因。最終經過思考后,找到了一種方法,和大家分享下。
在前端我需要通過ajax 傳遞如下的一個json對象:
var model = { Parameters: [ { Name: "A", Value: 1 }, { Name: "B", Value: 2 } ] };
所以我的ajax提交代碼如下:
$("#btnGetModel").click(function () { //var model = getParamenters(); var model = { Parameters: [ { Name: "A", Value: 1 }, { Name: "B", Value: 2 } ] }; if (model.Parameters.length > 0) { $.ajax({ url: baseUri + "api/Model/Show", type: "post", dataType: "json", data: model, beforeSend: function (request) { request.setRequestHeader('Authorization', 'Bearer ' + getCookie("token")); } }).then( function (d) { if (d.StatusCode == 0) { //SetModel(d.Message); initModel(d.Message); } else { showMsg(d.Message,"msgContainer"); } }, function () { showMsg("請求失敗", "msgContainer"); } ); } else { showMsg("沒有設定正確的參數!", "msgContainer"); } });
這里注意一下傳遞的json對象名稱為model。
然后看一下后端接口:api/Model/Show。不用看具體實現代碼,而要注意傳遞的參數的類型和參數的名稱。
[HttpPost] [ActionName("Show")] [Authorize] public async Task<IHttpActionResult> Generate([FromBody]ModelInfo model) { Dictionary<string, double> pars = new Dictionary<string, double>(); if (model.Parameters.Count > 0) { foreach (Parameter par in model.Parameters) { pars.Add(par.Name, par.Value); } } string newFilePath = await modelMaker.Generate(pars); if (!string.IsNullOrEmpty(newFilePath)) { return Json(new ResultData { StatusCode = 0, Message = newFilePath }); } else { return Json(new ResultData { StatusCode = 1, Message = "模型生成失敗!" }); } }
可以看到,傳遞的參數名稱也是model,其實這里是和json對象的名稱是一致的。
接着,繼續看ModelInfo這個類型
public class ModelInfo { public List<Parameter> Parameters { get; set; } }
這個類里面有個Parameter類型集合的屬性,而這個屬性的名稱是Parameters,而這又是跟json對象的Parameters屬性對應。簡單來說,這個屬性就是一個集合,里面又包含了對象。
下面接着看Parameter這個對象:
public class Parameter { public string Name { get; set; } public double Value { get; set; } }
這個對象里面的屬性名稱又和json對象數組中的對象的屬性名稱又對應上了。
這樣前端的json類型就能准確傳遞到后端來了。
總結:前端不管是多復雜的json數據類型,只要在后端按照這個json數據結構來組合類,並將屬性名稱一一對應上,就能准確將前端數據傳遞到后台上。
一點經驗,有錯誤的地方歡迎大家指正。