使用多種客戶端消費WCF RestFul服務(四)——Jquery篇

石曼迪發表於2013-12-05
客戶端RESTjQuery

Jquery篇

網際網路開發中少不了各類前端開發框架，其中JQUERY就是最流行之一，本篇我們就採用JQUERY來消費WCF RestFul服務，其中用到JSON基礎知識，如果有想了解的朋友，請訪問：《使用Jquery解析Json基礎知識》。

開發工具：Microsoft Visual Studio 2013(僅僅只是為了F5)

版本：jQuery JavaScript Library v1.4.2

另用到jquery-json 擴充套件庫

下載地址在這裡：http://code.google.com/p/jquery-json/

服務端仍然用第一篇的，不過有一些改動，本篇將另行提供下載。

 

一、GET方式

新建Index_Get.html靜態頁，新增JS引用：

<script type="text/javascript" src="JS/jquery-1.4.2.js"></script>

然後呼叫Jquery初始化方法：

$(document).ready(function () {
            $.ajax({
                type: "get",
                url: "http://localhost:3720/UserService.svc/GetPerson",
                contentType: "application/json; charset=utf-8",
                success: function (json)
                {
                    alert(json.Name)
                },
                error: function (error) {
                    alert("呼叫出錯" + error.responseText);
                }
            });

解釋：

type：表示提交請求方式 ("POST" 或 "GET")， 預設為 "GET"。注意：其它 HTTP 請求方法，如 PUT 和 Delete 也可以使用，但僅部分瀏覽器支援；

    url：請求服務資源名；

    contentType：提交編碼格式(預設: "application/x-www-form-urlencoded") 傳送資訊至伺服器時內容編碼型別。預設值適合大多數應用場合；

    success：請求成功後回撥函式。這個方法有兩個引數：伺服器返回資料，返回狀態。

帶參方式基本一樣，只是資源名後面加了GET引數。

$.ajax({
                type: "get",
                url: "http://localhost:3720/UserService.svc/GetPersonById/2",
                contentType: "application/json; charset=utf-8",
                success: function (json) {
                    alert(json.Name)
                },
                error: function (error) {
                    alert("呼叫出錯" + error.responseText);
                }
            });

呼叫效果如圖：

image

 

二、POST方式

新建Index_Post.html靜態頁，新增JS引用：

<script type="text/javascript" src="JS/jquery-1.4.2.js"></script>
    <script type="text/javascript" src="JS/json2.js"></script>

然後呼叫Jquery初始化方法：

$.ajax({
                type: "POST",
                url: "http://localhost:3720/UserService.svc/GetPersonPost",
                contentType: "application/json",
                data: "",
                dataType: "text",
                processData: false,
                success: function (json) { alert(json) },
                error: function (error) {
                    alert("呼叫出錯" + error.responseText);
                }
            });

解釋：

type：表示提交請求方式 ("POST" 或 "GET")， 預設為 "GET"。注意：其它 HTTP 請求方法，如 PUT 和 Delete 也可以使用，但僅部分瀏覽器支援；

    url：請求服務資源名；

    data：表示要POST傳送到伺服器的資料。將自動轉換為請求字串格式。GET 請求中將附加在 URL 後。檢視 processData 選項說明以禁止此自動轉換。必須為 Key/Value 格式。如果為陣列，jQuery 將
      自動為不同值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換為 '&foo=bar1&foo=bar2'；

    dataType：預期伺服器返回的資料型別。如果不指定，jQuery 將自動根據 HTTP 包 MIME 資訊返回 responseXML 或 responseText，並作為回撥函式引數傳遞，可用值:

             "xml": 返回 XML 文件，可用 jQuery 處理。

               "html": 返回純文字 HTML 資訊；包含 script 元素。

               "script": 返回純文字 JavaScript 程式碼。不會自動快取結果。

               "json": 返回 JSON 資料 。

               "jsonp": JSONP 格式。使用 JSONP 形式呼叫函式時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函式名，以執行回撥函式。

contentType：提交編碼格式(預設: "application/x-www-form-urlencoded") 傳送資訊至伺服器時內容編碼型別。預設值適合大多數應用場合；

processData：(預設: true) 預設情況下，傳送的資料將被轉換為物件(技術上講並非字串) 以配合預設內容型別 "application/x-www-form-urlencoded"。如果要傳送 DOM 樹資訊或其它不希望轉換的資訊，請設定為 false。

success：請求成功後回撥函式。這個方法有兩個引數：伺服器返回資料，返回狀態。

如果要POST引數回去，需要（建議）將引數構造成JSON格式，如：

{"id":"2","name":"deluyi","age":"33"}

然後在 Data中賦值，具體實現方式如下：

$.ajax({
                type: "POST",
                url: "http://localhost:3720/UserService.svc/GetPersonPostById",
                contentType: "application/json",
                data: '{"id":"2","name":"deluyi","age":"33"}',
                dataType: "JSON",
                processData: true,
                success: function (json)
                {
                    alert(json);
                },
                error: function (error) {
                    alert("呼叫出錯" + error.responseText);
                }
            });

這種POST的資料到了服務端不會被自動解析為User型別（或者說我還沒找到能夠讓他解析為User型別的方法），那麼我們稍微修改下服務端的引數定義方式，如：

[OperationContract]
        [WebInvoke(UriTemplate = "GetPersonPostById", RequestFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped, ResponseFormat = 
     WebMessageFormat.Json, Method = "POST")]
        public User GetUserPostById(string id, string name, string age)
        {
            return new User { Age = "15", ID = "004", Name = "laoliu" };
        }

這樣可以斷點引數列表，得到客戶端傳送過來的引數，截圖如：

image

結合上述程式碼，我們基本上完成了jquery對Restful 風格的WCF 服務的消費任務，那麼在EXTJs中或者其他前端開發庫中使用方式將會是大同小異的。

本篇程式碼下載：點選下載

相關文章