C# WebApi傳參之Get請求-AJAX

最近悟出來一個道理，在這兒分享給大家：學曆代表你的過去，能力代表你的現在，學習代表你的将來。

十年河東十年河西，莫欺少年窮。

學無止境，精益求精

在介紹本篇部落格之前，先來溫故下AJax的請求，直接上别人的介紹，勿怪。

如下：

jquery中的ajax方法參數總是記不住，這裡記錄一下。

1.url:

要求為String類型的參數，（預設為目前頁位址）發送請求的位址。

2.type:

要求為String類型的參數，請求方式（post或get）預設為get。注意其他http請求方法，例如put和delete也可以使用，但僅部分浏覽器支援。

3.timeout:

要求為Number類型的參數，設定請求逾時時間（毫秒）。此設定将覆寫$.ajaxSetup()方法的全局設定。

4.async:

要求為Boolean類型的參數，預設設定為true，所有請求均為異步請求。如果需要發送同步請求，請将此選項設定為false。注意，同步請求将鎖住浏覽器，使用者其他操作必須等待請求完成才可以執行。

5.cache:

要求為Boolean類型的參數，預設為true（當dataType為script時，預設為false），設定為false将不會從浏覽器緩存中加載請求資訊。

6.data:

要求為Object或String類型的參數，發送到伺服器的資料。如果已經不是字元串，将自動轉換為字元串格式。get請求中将附加在url後。防止這種自動轉換，可以檢視　　processData選項。對象必須為key/value格式，例如{foo1:"bar1",foo2:"bar2"}轉換為&foo1=bar1&foo2=bar2。如果是數組，JQuery将自動為不同值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換為&foo=bar1&foo=bar2。

7.dataType:

要求為String類型的參數，預期伺服器傳回的資料類型。如果不指定，JQuery将自動根據http包mime資訊傳回responseXML或responseText，并作為回調函數參數傳遞。可用的類型如下：

xml：傳回XML文檔，可用JQuery處理。

html：傳回純文字HTML資訊；包含的script标簽會在插入DOM時執行。

script：傳回純文字JavaScript代碼。不會自動緩存結果。除非設定了cache參數。注意在遠端請求時（不在同一個域下），所有post請求都将轉為get請求。

json：傳回JSON資料。

jsonp：JSONP格式。使用SONP形式調用函數時，例如myurl?callback=?，JQuery将自動替換後一個“?”為正确的函數名，以執行回調函數。

text：傳回純文字字元串。

8.beforeSend：

要求為Function類型的參數，發送請求前可以修改XMLHttpRequest對象的函數，例如添加自定義HTTP頭。在beforeSend中如果傳回false可以取消本次ajax請求。XMLHttpRequest對象是惟一的參數。

function(XMLHttpRequest){

this; //調用本次ajax請求時傳遞的options參數

}

9.complete：

要求為Function類型的參數，請求完成後調用的回調函數（請求成功或失敗時均調用）。參數：XMLHttpRequest對象和一個描述成功請求類型的字元串。

function(XMLHttpRequest, textStatus){

this; //調用本次ajax請求時傳遞的options參數

}

10.success：要求為Function類型的參數，請求成功後調用的回調函數，有兩個參數。

(1)由伺服器傳回，并根據dataType參數進行處理後的資料。

(2)描述狀态的字元串。

function(data, textStatus){

//data可能是xmlDoc、jsonObj、html、text等等

this; //調用本次ajax請求時傳遞的options參數

}

11.error:

要求為Function類型的參數，請求失敗時被調用的函數。該函數有3個參數，即XMLHttpRequest對象、錯誤資訊、捕獲的錯誤對象(可選)。ajax事件函數如下：

function(XMLHttpRequest, textStatus, errorThrown){

//通常情況下textStatus和errorThrown隻有其中一個包含資訊

this; //調用本次ajax請求時傳遞的options參數

}

12.contentType：

要求為String類型的參數，當發送資訊至伺服器時，内容編碼類型預設為"application/x-www-form-urlencoded"。該預設值适合大多數應用場合。

13.dataFilter：

要求為Function類型的參數，給Ajax傳回的原始資料進行預處理的函數。提供data和type兩個參數。data是Ajax傳回的原始資料，type是調用jQuery.ajax時提供的dataType參數。函數傳回的值将由jQuery進一步處理。

function(data, type){

//傳回處理後的資料

return data;

14.dataFilter：

15.global：

要求為Boolean類型的參數，預設為true。表示是否觸發全局ajax事件。設定為false将不會觸發全局ajax事件，ajaxStart或ajaxStop可用于控制各種ajax事件。

16.ifModified：

要求為Boolean類型的參數，預設為false。僅在伺服器資料改變時擷取新資料。伺服器資料改變判斷的依據是Last-Modified頭資訊。預設值是false，即忽略頭資訊。

17.jsonp：

要求為String類型的參數，在一個jsonp請求中重寫回調函數的名字。該值用來替代在"callback=?"這種GET或POST請求中URL參數裡的"callback"部分，例如{jsonp:'onJsonPLoad'}會導緻将"onJsonPLoad=?"傳給伺服器。

18.username：

要求為String類型的參數，用于響應HTTP通路認證請求的使用者名。

19.password：

要求為String類型的參數，用于響應HTTP通路認證請求的密碼。

20.processData：

要求為Boolean類型的參數，預設為true。預設情況下，發送的資料将被轉換為對象（從技術角度來講并非字元串）以配合預設内容類型"application/x-www-form-urlencoded"。如果要發送DOM樹資訊或者其他不希望轉換的資訊，請設定為false。

21.scriptCharset：

要求為String類型的參數，隻有當請求時dataType為"jsonp"或者"script"，并且type是GET時才會用于強制修改字元集(charset)。通常在本地和遠端的内容編碼不同時使用。

以上便是Ajax請求各參數介紹

下面開始咱們的AJax請求之Get方式

Get請求就是通過URL位址進行的請求，其有如下特點：

1、Get請求的安全性不如Post

2、Get請求允許傳遞的資料量為1024位元組，是以：不宜傳遞過多資料，否則會超出限制

3、Get請求時，将各個參數浮在URL之後進行請求，也就是将資料放在Http協定頭中

下面來簡單介紹下幾種不同的Get請求

1、不傳遞參數的Get請求

2、傳遞一個參數的Get請求

3、傳遞多個參數的Get請求

4、傳遞一個實體的Get請求

在進行之前，先來做下準備工作(本案例并沒有做到真正的資料持久化，僅僅為簡單模拟而已)：

首先建一個Person類，如下：

public class Person
    {
        private int id;

        public int Id
        {
            get { return id; }
            set { id = value; }
        }
        private int age;

        public int Age
        {
            get { return age; }
            set { age = value; }
        }
        private string name;

        public string Name
        {
            get { return name; }
            set { name = value; }
        }
        private string sex;

        public string Sex
        {
            get { return sex; }
            set { sex = value; }
        }

    }

很簡單，不多說。

另一個ResultToJson類，如下：<我之前的部落格中有專門描述，請參照我的部落格：C# web api 傳回類型設定為json的兩種方法>

public class ResultToJson
    {
        public static HttpResponseMessage toJson(Object obj)
        {
            String str;
            if (obj is String || obj is Char)
            {
                str = obj.ToString();
            }
            else
            {
                JavaScriptSerializer serializer = new JavaScriptSerializer();
                str = serializer.Serialize(obj);
            }
            HttpResponseMessage result = new HttpResponseMessage { Content = new StringContent(str, Encoding.GetEncoding("UTF-8"), "application/json") };
            return result;
        } 
    }

最後一個就是JsonHelper類，這個大家可參考我之前的部落格：C#處理JSON資料

至此：準備工作準備完畢

建立一個WebApi控制器如下：

public class PersonController : ApiController
    {
        List<Person> list = new List<Person>();
        /// <summary>
        /// 初始化資料
        /// </summary>
        public PersonController()
        {
            for (int i = 0; i < 100; i++)
            {
                Person P = new Person()
                {
                    Id = i,
                    Name = "Name" + i,
                    Age = i,
                    Sex = i % 2 == 0 ? "M" : "W"
                };
                list.Add(P);
            }
        }
     }

1、不傳參數的Get請求如下：

/// <summary>
        /// 簡單測試案例
        /// </summary>
        /// <returns></returns>
        [HttpGet]
        public string Get()
        {
            return "OK";
        }

//無參數請求-簡單示例
        $(document).ready(function () {
            $.ajax({
                url: "http://localhost:9953/api/Person/Get",
                type: "get",
                contentType: "application/json",
                dataType: "text",
                data:{},
                success: function (result,status) {
                    if (status == "success") {
                        alert(result);
                    }
                },
                error: function (error) {
                    alert(error);
                }
            });
        });

2、傳遞一個參數的案例如下：

/// <summary>
        /// 通過id擷取特定資料
        /// </summary>
        /// <param name="Id"></param>
        /// <returns></returns>
        [HttpGet]
        public string GetById(int Id)
        {
            list = list.Where(p => p.Id == Id).ToList();
            return JsonHelper.JsonSerializer<List<Person>>(list);
        }

//單個參數傳遞
        $(document).ready(function (data) {
            $.ajax({
                url: "http://localhost:9953/api/Person/GetById",
                type: "get",
                dataType: "text",
                data: {Id:"3"},
                success: function (result,status) {
                    alert(result)
                },
                error: function (error) {
                    alert(error);
                }
            });
        });

有興趣的小虎斑們也可以嘗試URL傳參的方法：<把請求的data去掉，URL後面加上傳遞的參數>

//單個參數傳遞
        $(document).ready(function (data) {
            $.ajax({
                url: "http://localhost:9953/api/Person/GetById?Id=3",
                type: "get",
                dataType: "text",
                success: function (result,status) {
                    alert(result)
                },
                error: function (error) {
                    alert(error);
                }
            });
        });

3、傳遞多個參數如下：

/// <summary>
        /// 多個參數傳遞
        /// </summary>
        /// <param name="Name"></param>
        /// <returns></returns>
        [HttpGet]
        public HttpResponseMessage GetByIdAndSex(int Id,string Sex)
        {
            List<Person> list_2 = new List<Person>();
            var Result = from r in list
                         where r.Id == Id && r.Sex==Sex
                         select r;
            foreach (var Item in Result)
            {
                list_2.Add(Item);
            }
            return ResultToJson.toJson(list_2);
        }

//多個參數傳遞
        $(document).ready(function (data) {
            $.ajax({
                url: "http://localhost:9953/api/Person/GetByIdAndSex",
                type: "get",
                contentType: "application/json",
                dataType: "text",
                data: { Id: "3",Sex:"W" },
                success: function (result, status) {
                    alert(result)
                },
                error: function (error) {
                    alert(error);
                }
            });
        });

當然，有興趣的小虎斑也可以将參數放在URL後面進行測試，在此不作說明！

4、傳遞一個實體

/// <summary>
        /// 對象作為參數
        /// </summary>
        /// <param name="P"></param>
        /// <returns></returns>
        [HttpGet]
        public HttpResponseMessage GetByObject([FromUri]Person P)
        {
            return ResultToJson.toJson(P);
        }

//傳遞一個對象該如何？
        $(document).ready(function (data) {
            $.ajax({
                url: "http://localhost:9953/api/Person/GetByObject",
                type: "get",
                dataType: "text",
                data: { Id: "8888",Sex:"男",Name:"陳卧龍",Age:"26" },
                success: function (result, status) {
                    alert(result)
                },
                error: function (error) {
                    alert(error);
                }
            });
        });

大家可能發現傳遞實體時，代碼和上述有點不同，GetByObject([FromUri]Person P)加了一個[FromUri]。如果不加上這個關鍵詞的話，那麼則會傳遞實體失敗，究其原因如下：

C# WebApi傳參之Get請求-AJAX

繼續閱讀

為JSON 資料加入斜杠 \

幾個常用的Ajax庫小節

ASP.NET2.0下使用AJAX調用Webservice的方法

jQuery實作Ajax通訊的幾種常用方式

SpringMVC 與 Json實作資料互動

Spring MVC+Ajax建立執行個體

jquery,ajax,jsonp例子+springmvc背景

卷妹的成長日記之javaweb day5

SpringMVC(六) | 前後端互動之ajax與jsonjsonajax

SpringMVC之ajax異步互動

SpringMvc與前端互動的資料轉遞（ajax）一、text類型資料二、json類型資料

PHP基礎入門，簡單實作前端後端互動<?php?>、echo變量及區分單雙引号建立數組、echo、print_r()、var_dump()差別二維數組常見資料類型及調用函數自定義函數http協定常用請求方式及在php中的用法網頁和伺服器簡單互動案例

jqGrid的使用筆記：5. 事件

JSON的三種解析方式JSON的三種解析方式一、什麼是JSON？二、JSON解析之傳統的JSON解析三、JSON解析之GSON三、JSON解析之FastJSON總結：

django短信驗證碼的後端實作

前後端分離之跨域問題