MVC和WebApi 使用get和post 傳遞參數。

本文轉載自查看原文 2016-08-24 17:17 5075

我們總結一下用js請求服務器的傳參方法。

Get方式

Get主要是用來查詢，一般分為無參，一個參數，多個參數，實體對象參數。

1、無參

[javascript] view plain copy

print ?

//Get沒有參數
var get_f1 = function() {
$.ajax({
type: "get",
url: "/api/Demo",
success: function(data, status) {
if (status == "success") {
$("#div_test").html(data);
}
}
});
}

        //Get沒有參數
        var get_f1 = function() {
            $.ajax({
                type: "get",
                url: "/api/Demo",
                success: function(data, status) {
                    if (status == "success") {
                        $("#div_test").html(data);
                    }
                }
            });
        }

2、一個參數

[javascript] view plain copy

print ?

//Get一個參數
var get_f2 = function() {
$.ajax({
type: "get",
url: "/api/Demo",
data: { strQuery: JSON.stringify({ Id: "1", Name: "Jim", CreateTime: "1988-09-11" }) },
contentType: "application/json",
success: function(data, status) {
if (status == "success") {
$("#div_test").html(data);
}
}
});
}

        //Get一個參數
        var get_f2 = function() {
            $.ajax({
                type: "get",
                url: "/api/Demo",
                data: { strQuery: JSON.stringify({ Id: "1", Name: "Jim", CreateTime: "1988-09-11" }) },
                contentType: "application/json",
                success: function(data, status) {
                    if (status == "success") {
                        $("#div_test").html(data);
                    }
                }
            });
        }

后台控制器方法

[csharp] view plain copy

print ?

/// <summary>
/// 一個參數
/// </summary>
/// <param name="strQuery"></param>
/// <returns></returns>
[HttpGet]
public string Get(string strQuery)
{
//一個參數的時候，如果前端是傳過來的是字符串的json可以反序列化成對象。
//TbCharging oData = Newtonsoft.Json.JsonConvert.DeserializeObject<TbCharging>(strQuery);
//return String.Format("{0},{1},{2},{3}", oData.Id, oData.Name, oData.Des, oData.CreateTime.ToString("yyyy-MM-dd hh:mm:ss"));
return "一個參數" + strQuery;
}

        /// <summary>
        /// 一個參數
        /// </summary>
        /// <param name="strQuery"></param>
        /// <returns></returns>
        [HttpGet]
        public string Get(string strQuery)
        {
            //一個參數的時候，如果前端是傳過來的是字符串的json可以反序列化成對象。
            //TbCharging oData = Newtonsoft.Json.JsonConvert.DeserializeObject<TbCharging>(strQuery);
            //return String.Format("{0},{1},{2},{3}", oData.Id, oData.Name, oData.Des, oData.CreateTime.ToString("yyyy-MM-dd hh:mm:ss"));
            return "一個參數" + strQuery;
        }

備注：在Get方式的時候我們也可以把參數放在url，我這里為了前台寫得統一些，全都放在data里面，感覺好看一點。

3、多個參數

[javascript] view plain copy

print ?

//Get多個參數
var get_f3 = function() {
$.ajax({
type: "get",
url: "/api/Demo",
data: { Id: "1", Name: "Jim", CreateTime: "1988-09-11" },
success: function(data, status) {
if (status == "success") {
$("#div_test").html(data);
}
}
});
}

        //Get多個參數
        var get_f3 = function() {
            $.ajax({
                type: "get",
                url: "/api/Demo", 
                data: { Id: "1", Name: "Jim", CreateTime: "1988-09-11" },
                success: function(data, status) {
                    if (status == "success") {
                        $("#div_test").html(data);
                    }
                }
            });
        }

后台控制器方法

[csharp] view plain copy

print ?

/// <summary>
/// 多個參數
/// </summary>
/// <param name="Id"></param>
/// <param name="Name"></param>
/// <param name="CreateTime"></param>
/// <returns></returns>
[HttpGet]
public string Get(int Id, string Name, DateTime CreateTime)
{
return String.Format("多個參數,{0},{1},{2}", Id, Name, CreateTime.ToString("yyyy-MM-dd hh:mm:ss"));
}

        /// <summary>
        /// 多個參數
        /// </summary>
        /// <param name="Id"></param>
        /// <param name="Name"></param>
        /// <param name="CreateTime"></param>
        /// <returns></returns>
        [HttpGet]
        public string Get(int Id, string Name, DateTime CreateTime)
        {
            return String.Format("多個參數,{0},{1},{2}", Id, Name, CreateTime.ToString("yyyy-MM-dd hh:mm:ss"));
        }

4、一個實體對象參數

[javascript] view plain copy

print ?

//Get實體對象作為參數
var get_f4 = function() {
$.ajax({
type: "get",
url: "/api/Demo/GetModel",
data: { Id: "1", Name: "Jim", CreateTime: "1988-09-11" },
success: function(data, status) {
if (status == "success") {
$("#div_test").html(data);
}
}
});
}

        //Get實體對象作為參數
        var get_f4 = function() {
            $.ajax({
                type: "get",
                url: "/api/Demo/GetModel",
                data: { Id: "1", Name: "Jim", CreateTime: "1988-09-11" },
                success: function(data, status) {
                    if (status == "success") {
                        $("#div_test").html(data);
                    }
                }
            });
        }

備注：到這里有沒有發現多個參數和一個實體對象的請求方法是一樣的，假如兩個接收的方法都寫在同一個控制器里面的話，路由是區分不出來要匹配那個方法處理，

所以要用自定義路由來區分，在WebApi里面改方法名字是沒有用的。

后台控制器方法

[javascript] view plain copy

print ?

/// <summary>
/// 一個實體對象參數
/// </summary>
/// <param name="oData"></param>
/// <returns></returns>
[HttpGet]
[Route("GetModel")]
public string Get([FromUri]TbCharging oData)
{
return String.Format("一個實體對象參數，{0},{1},{2},{3}", oData.Id, oData.Name, oData.Des, oData.CreateTime.ToString("yyyy-MM-dd hh:mm:ss"));
}

        /// <summary>
        /// 一個實體對象參數
        /// </summary>
        /// <param name="oData"></param>
        /// <returns></returns>
        [HttpGet]
        [Route("GetModel")]
        public string Get([FromUri]TbCharging oData)
        {
            return String.Format("一個實體對象參數，{0},{1},{2},{3}", oData.Id, oData.Name, oData.Des, oData.CreateTime.ToString("yyyy-MM-dd hh:mm:ss")); 
        }

備注：在使用Get傳遞實體對象參數的時候要注意，因為Get方式的時候參數是寫在url的，所以我們在后台用[FromBody]是拿不到實體參數的，需要寫[FromUri]才行。

Post方式

Post方式我們一般用來做增、刪、改操作。在WebApi中Post僅僅用來做增加操作，修改用Put，刪除用Delete。這些在新建模板的時候就自動為我們生成了。

還有要提一下的是Post只能傳遞一個參數，如果需要多個參數的時候我們需要把它們合並成一個擴展對象，當做對象來傳遞。

在后台接收的時候我們需要在參數列表里面寫上[ print ?

//Post一個參數
var post_f1 = function() {
$.ajax({
type: "post",
url: "/api/Demo",
data: { "": "Jim" },
//data: "=Jim", //兩種寫法，其他寫法獲取不到值
success: function(data, status) {
if (status == "success") {
$("#div_test").html(data);
}
}
});
}

        //Post一個參數
        var post_f1 = function() {
            $.ajax({
                type: "post",
                url: "/api/Demo",
                data: { "": "Jim" },
                //data: "=Jim", //兩種寫法，其他寫法獲取不到值
                success: function(data, status) {
                    if (status == "success") {
                        $("#div_test").html(data);
                    }
                }
            });
        }

注意：在寫參數的時候我們不能把參數寫成 print ?

/// <summary>
/// 一個參數
/// </summary>
/// <param name="name"></param>
/// <returns></returns>
public string Post([FromBody]string name)
{
return "一個參數，" + name;
}

        /// <summary>
        /// 一個參數
        /// </summary>
        /// <param name="name"></param>
        /// <returns></returns>
        public string Post([FromBody]string name)
        {
            return "一個參數，" + name;
        }

2、一個實體對象參數

[javascript] view plain copy

print ?

//Post一個對象（Post不能提交多個參數，只能將多個參數封裝成一個對象）
var post_f2 = function () {
var postdata = { Id: "1", Name: "Jim", CreateTime: "1988-09-11" };
$.ajax({
type: "post",
url: "/api/Demo/PostAdd",//多個post的時候，路由會匹配不到，所以要自定義路由
//data: { Id: "1", Name: "Jim", CreateTime: "1988-09-11" },
data: postdata,
success: function (data, status) {
if (status == "success") {
$("#div_test").html(data);
}
}
});
}

        //Post一個對象（Post不能提交多個參數，只能將多個參數封裝成一個對象）
        var post_f2 = function () {
            var postdata = { Id: "1", Name: "Jim", CreateTime: "1988-09-11" };
            $.ajax({
                type: "post",
                url: "/api/Demo/PostAdd",//多個post的時候，路由會匹配不到，所以要自定義路由
                //data: { Id: "1", Name: "Jim", CreateTime: "1988-09-11" },
                data: postdata,
                success: function (data, status) {
                    if (status == "success") {
                        $("#div_test").html(data);
                    }
                }
            });
        }

后台控制器方法

[csharp] view plain copy

print ?

/// <summary>
/// 一個對象
/// </summary>
/// <param name="oData"></param>
/// <returns></returns>
[HttpPost]
[Route("PostAdd")]
public object Post([FromBody]TbCharging oData)
{
var strName = String.Format("一個對象，{0},{1}", oData.Id, oData.Name);
return strName;
}

        /// <summary>
        /// 一個對象
        /// </summary>
        /// <param name="oData"></param>
        /// <returns></returns>
        [HttpPost]
        [Route("PostAdd")]
        public object Post([FromBody]TbCharging oData)
        {
            var strName = String.Format("一個對象，{0},{1}", oData.Id, oData.Name);
            return strName;
        }

備注：這里參數列表最好寫上[FromBody]，雖然不寫也能拿到值。

3、一個數組參數

[javascript] view plain copy

print ?

//Post數組作為參數
var post_f3 = function () {
var arr = ["1", "2", "3", "4"];
$.ajax({
type: "post",
url: "/api/Demo/PostArray",
contentType: 'application/json',
data: JSON.stringify(arr),
success: function (data, status) {
if (status == "success") {
$("#div_test").html(data);
}
}
});
}

        //Post數組作為參數
        var post_f3 = function () {
            var arr = ["1", "2", "3", "4"];
            $.ajax({
                type: "post",
                url: "/api/Demo/PostArray",
                contentType: 'application/json',
                data: JSON.stringify(arr),
                success: function (data, status) {
                    if (status == "success") {
                        $("#div_test").html(data);
                    }
                }
            });
        }

這里我們說一下contentType和dataType。

contentType

發送信息至服務器時內容編碼類型。假如你不寫的話，默認值是: "application/x-www-form-urlencoded"。

dataType

預期服務器返回的數據類型。

如果我們Post提交的是json參數，最好就寫上 print ?

/// <summary>
/// 數組作為參數
/// </summary>
/// <param name="ids"></param>
/// <returns></returns>
[HttpPost]
[Route("PostArray")]
public object Post(string[] ids)
{
return String.Format("{0},{1},{2}", ids[0], ids[1], ids[2]);
}

        /// <summary>
        /// 數組作為參數
        /// </summary>
        /// <param name="ids"></param>
        /// <returns></returns>
        [HttpPost]
        [Route("PostArray")]
        public object Post(string[] ids)
        {
            return String.Format("{0},{1},{2}", ids[0], ids[1], ids[2]);
        }

4、實體集合參數

[javascript] view plain copy

print ?

//Post對象集合，多個相同對象(多個不同對象的時候可以將多個對象封裝成一個擴展對象)
var post_f4 = function () {
var arr = [
{ Id: "1", Name: "Jim", CreateTime: "1988-09-11" },
{ Id: "2", Name: "Lilei", CreateTime: "1990-12-11" },
{ Id: "3", Name: "Lucy", CreateTime: "1986-01-10" }
];
$.ajax({
type: "post",
url: "/api/Demo/PostMulti",//多個post的時候，路由會匹配不到，所以要自定義路由
contentType: 'application/json',
data: JSON.stringify(arr),
success: function (data, status) {
if (status == "success") {
$("#div_test").html(data);
}
}
});
}

        //Post對象集合，多個相同對象(多個不同對象的時候可以將多個對象封裝成一個擴展對象)
        var post_f4 = function () {
            var arr = [
                { Id: "1", Name: "Jim", CreateTime: "1988-09-11" },
                { Id: "2", Name: "Lilei", CreateTime: "1990-12-11" },
                { Id: "3", Name: "Lucy", CreateTime: "1986-01-10" }
            ];
            $.ajax({
                type: "post",
                url: "/api/Demo/PostMulti",//多個post的時候，路由會匹配不到，所以要自定義路由  
                contentType: 'application/json',
                data: JSON.stringify(arr),
                success: function (data, status) {
                    if (status == "success") {
                        $("#div_test").html(data);
                    }
                }
            });
        }

后台的控制器方法

[csharp] view plain copy

print ?

/// <summary>
/// 對象集合
/// </summary>
/// <param name="lstCharging"></param>
/// <returns></returns>
[HttpPost]
[Route("PostMulti")]
public object Post([FromBody]List<TbCharging> lstCharging)
{
return String.Format("{0},{1}", lstCharging[0].Name, lstCharging[1].Name);
}

        /// <summary>
        /// 對象集合
        /// </summary>
        /// <param name="lstCharging"></param>
        /// <returns></returns>
        [HttpPost]
        [Route("PostMulti")]
        public object Post([FromBody]List<TbCharging> lstCharging)
        {
            return String.Format("{0},{1}", lstCharging[0].Name, lstCharging[1].Name);
        }

自定義路由

使用場景：用於方法重載，忽略方法名，自定義url

使用步驟：

1、在控制器類上方加入一個標記

[csharp] view plain copy

print ?

[RoutePrefix("api/Demo")]
public class DemoController : ApiController
{}

    [RoutePrefix("api/Demo")]
    public class DemoController : ApiController
    {}

2、在方法中加入路由標記

[csharp] view plain copy

print ?

/// <summary>
/// 數組作為參數
/// </summary>
/// <param name="ids"></param>
/// <returns></returns>
[HttpPost]
[Route("PostArray")]
public object Post([FromBody]string[] ids)
{
return String.Format("{0},{1},{2}", ids[0], ids[1], ids[2]);
}

        /// <summary>
        /// 數組作為參數
        /// </summary>
        /// <param name="ids"></param>
        /// <returns></returns>
        [HttpPost]
        [Route("PostArray")]
        public object Post([FromBody]string[] ids)
        {
            return String.Format("{0},{1},{2}", ids[0], ids[1], ids[2]);
        }

備注：上面的api/Demo和PostArray可以自己定義名字。像我這樣寫就可以直接用 url:"/api/Demo/PostArray"來訪問了。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 MVC和WebApi 使用get和post 傳遞參數。關於mvc、webapi中get、post、put、delete的參數 webapi 之 post參數傳遞關於post和get傳遞參數的區別關於post和get傳遞參數的區別關於post和get傳遞參數的區別 WebAPI Get||Post 請求下傳遞實體參數以及API跨域問題的解決 springMVC正確使用GET POST PUT和DELETE方法，如何傳遞參數 vue開發中使用axios的post、get方法傳遞參數 [轉發]MVC WebAPI get和post請求