日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
jQuery調(diào)用WCF服務(wù)傳遞JSON對(duì)象

下面這個(gè)示例使用了WCF去創(chuàng)建一個(gè)服務(wù)端口從而能夠被ASP.Net頁(yè)面通過(guò)jQuery的AJAX方法訪問(wèn)，我們將在客戶端使用Ajax技術(shù)來(lái) 與WCF服務(wù)進(jìn)行通信。這里我們僅使用jQuery去連接Web Service,而不去使用ASP.Net AJAX庫(kù)，至于為什么不使用AJAX庫(kù)中，那是因?yàn)槲覀冊(cè)陧?xiàng)目中已經(jīng)使用了jQuery，而它已經(jīng)能處理全部的AJAX請(qǐng)求和所有功能，并且，如果我們 一旦使用ASP.NET AJAX庫(kù)，我們也必須多包含一個(gè)超過(guò)80Kb的數(shù)據(jù)量（調(diào)試模式下會(huì)更大），但這也不是說(shuō)ASP.NET AJAX庫(kù)不實(shí)用，事實(shí)上，如果使用了相同的類庫(kù)，我們能夠少寫(xiě)很多的額外代碼，但這個(gè)例子就是為了說(shuō)明，在沒(méi)有一個(gè)好的客戶端代理的情況下，我們是如何調(diào)用Web服務(wù)的。

WCF 服務(wù):

我們先創(chuàng)建一個(gè)WebSite，然后添加一個(gè)AJAX-enabled WCF Service，從而創(chuàng)建WCF服務(wù)。（請(qǐng)確保你使用了正確的.Net Framework 版本，我用的是3.5）

在我們添加完service后，它會(huì)自動(dòng)進(jìn)入該service的后置代碼文件，Go ahead and browse around the file for a second.

首先我們要做的是找到"AspNetCompatibilityRequirements"并將其值置為 "Allowed":

[AspNetCompatibilityRequirements( RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed )] 
 

這個(gè)屬性的設(shè)置可將我們的服務(wù)跑在ASP.NET compatibility模式，如果我們未將該值設(shè)為"Allowed"，那么就無(wú)法通過(guò)ASP.Net去訪問(wèn)到該服務(wù)，這個(gè)屬性是當(dāng)你添加 "AJAX-enabled WCF Service" 時(shí)自動(dòng)生成的。更多祥細(xì)請(qǐng)參看MSDN。

現(xiàn)在再來(lái)看自動(dòng)生成的后置代碼文件，我們能發(fā)現(xiàn)已經(jīng)存在了一個(gè)被標(biāo)注了"OperationContract"特性的"DoWork()" 的方法，這個(gè)方法是自動(dòng)生成的，我們將使用這個(gè)方法來(lái)完成下面的示例。我們?cè)賮?lái)為該方法添加一個(gè)"WebGet"的特性，并設(shè)"RequestFormat" 的值為 "Json." 我們?cè)賮?lái)為該方法加上另外的一個(gè)特性RequestFormat，WebGet 和Get動(dòng)詞一樣，作用于一個(gè)UriTemplate（本文不對(duì)此作進(jìn)一步討論），RequestFormat 特性可以讓我們接收J(rèn)SON格式的請(qǐng)求。

我們的 "DoWork()" 方法如下:

 
 
 
 
    
  
  
  
  
  1. [OperationContract]   
    2. 
  
  
  
  
  2. [WebGet( RequestFormat=WebMessageFormat.Json )]   
    3. 
  
  
  
  
  3. public void DoWork()   
    4. 
  
  
  
  
  4. {   
    5. 
  
  
  
  
  5.     // Add your operation implementation here   
    6. 
  
  
  
  
  6.     return;   
    7. 
  
  
  
  
  7. } 
    8.

對(duì)象的模型：

我們希望通過(guò)"DoWork()" 來(lái)傳遞一個(gè)叫“Person”的對(duì)象，那先來(lái)創(chuàng)建一個(gè)Person對(duì)象寫(xiě)入到當(dāng)前類的頭部，其包含字段和屬性（Name, Age 和 the types of Shoes they own），這個(gè)類同時(shí)也作為所傳遞JSON的結(jié)構(gòu)。

 
 
 
 
    
  
  
  
  
  1. [Serializable]   
    2. 
  
  
  
  
  2. [DataContract( Namespace = "http://www.dennydotnet.com/", Name = "Person" )]   
    3. 
  
  
  
  
  3. public class Person   
    4. 
  
  
  
  
  4. {   
    5. 
  
  
  
  
  5.     private string _name = string.Empty;   
    6. 
  
  
  
  
  6.     private int _age = 0;   
    7. 
  
  
  
  
  7.  
    8. 
  
  
  
  
  8.     [DataMember( IsRequired = true, Name = "Name" )]   
    9. 
  
  
  
  
  9.     public string Name   
    10. 
  
  
  
  
  10.     {   
    11. 
  
  
  
  
  11.         get { return _name; }   
    12. 
  
  
  
  
  12.         set { _name = value; }   
    13. 
  
  
  
  
  13.     }   
    14. 
  
  
  
  
  14.  
    15. 
  
  
  
  
  15.     [DataMember( IsRequired = true, Name = "Age" )]   
    16. 
  
  
  
  
  16.     public int Age   
    17. 
  
  
  
  
  17.     {   
    18. 
  
  
  
  
  18.         get { return _age; }   
    19. 
  
  
  
  
  19.         set { _age = value; }   
    20. 
  
  
  
  
  20.     }   
    21. 
  
  
  
  
  21.  
    22. 
  
  
  
  
  22.     [DataMember( IsRequired = true, Name = "Shoes" )]   
    23. 
  
  
  
  
  23.     public List Shoes;   
    24. 
  
  
  
  
  24. }   
    25. 
  
  
  
  
  25.  
    26. 
  
  
  
  
  26.    
    27.

我們已經(jīng)為 "Person”類的名稱和命名空間標(biāo)注上了契約，我們?nèi)孕枰獮閷傩允谟跀?shù)據(jù)成員特性，為每個(gè)屬性 設(shè)置"IsRequired"并具體指定其名稱。你只需要具體指定名字，如果它和屬性名不一樣。舉例來(lái)說(shuō)吧，如果你有一個(gè)屬性叫作“Level”，但你在 數(shù)據(jù)成員特性中賦值為“Rank”，現(xiàn)在我們要回去修改我們的“DoWork()”方法，去接收Person對(duì)象作為參數(shù)。具體參下面代碼塊。

 
 
 
 
    
  
  
  
  
  1. [OperationContract]   
    2. 
  
  
  
  
  2. [WebGet( RequestFormat=WebMessageFormat.Json )]   
    3. 
  
  
  
  
  3. public void DoWork(Person p)   
    4. 
  
  
  
  
  4. {   
    5. 
  
  
  
  
  5.     // Add your operation implementation here   
    6. 
  
  
  
  
  6.     return;   
    7. 
  
  
  
  
  7. }  
    8. 
  
  
  
  
  8.   
    9.

對(duì)Web.Config文件進(jìn)行配置:
我們僅需對(duì)web.config文件做出很小的修改就能對(duì)服務(wù)進(jìn)行訪問(wèn)了。首先加入一個(gè) serviceBehavior 用來(lái)允許Http Get請(qǐng)求，再添加一些調(diào)試選項(xiàng)幫助。代碼如下：

Below 

 
 
 
 
    
  
  
  
  
  1.    
    2. 
  
  
  
  
  2.      name="ServiceAspNetAjaxBehavior">   
    3. 
  
  
  
  
  3.          httpGetEnabled="true" httpGetUrl="" />   
    4. 
  
  
  
  
  4.          httpHelpPageEnabled="true" includeExceptionDetailInFaults="true" />   
    5. 
  
  
  
  
  5.        
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7.   
    8.

在這里之間，你的代碼如下：

 
 
 
 
    
  
  
  
  
  1.  name="Service" behaviorConfiguration="ServiceAspNetAjaxBehavior">   
    2. 
  
  
  
  
  2.      address="" behaviorConfiguration="ServiceAspNetAjaxBehavior"   
    3. 
  
  
  
  
  3. binding="webHttpBinding" contract="Service" />   
    4. 
  
  
  
  
  4.      address="mex" binding="mexHttpBinding" contract="IMetadataExchange" />   
    5. 
  
  
  
  
  5.    
    6. 
  
  
  
  
  6.   
    7.

注意：

 
 
 
 
    
  
  
  
  
  1.  httpHelpPageEnabled="true" includeExceptionDetailInFaults="true" />  
    2.

允許例外可能會(huì)導(dǎo)致內(nèi)部應(yīng)用相關(guān)信息，包括個(gè)人信息的泄露。設(shè)置為true僅用于調(diào)試目的！

你的Web.config文件修改后如下圖所示：

回到前端頁(yè)面:

現(xiàn)在我們的服務(wù)已經(jīng)被創(chuàng)建和配置了，再來(lái)關(guān)注前端頁(yè)面部分吧（確保頁(yè)面已引用jQuery.js文件），首先來(lái)創(chuàng)建一個(gè)簡(jiǎn)單的Json對(duì)象用于向service傳遞，我們?cè)赑erson類結(jié)構(gòu)的基礎(chǔ)上創(chuàng)建該JSON對(duì)象。 

 
 
 
 
    
  
  
  
  
  1. var mydata = { "Name":"Denny", "Age":23, "Shoes":["Nike","Osiris","Etnies"] };  
    2.

如果你對(duì)JSON還不是很熟悉，我們可以把它看作一個(gè)對(duì)象，這個(gè)小工具幫助你來(lái)查看 (JsonViewer):

我們需要使用WCF和jQuery進(jìn)行Ajax通信，下面的代碼創(chuàng)建了一個(gè)AJAX呼叫，在頭部設(shè)置了GET方式，和內(nèi)容類型為 application/json，將url的路徑置為WCF 服務(wù)的 svc 文件，并在其后加上/和所要執(zhí)行方法的名稱，在這里我們要調(diào)用的是DoWork()方法，data是用來(lái)傳遞參數(shù)，為了讓jQuery不去自動(dòng)處理我們的 數(shù)據(jù)，將processData設(shè)為false，我們還加入了對(duì)success和error的處理，以更多的了解AJAX執(zhí)行完之后的處理過(guò)程。

 
 
 
 
    
  
  
  
  
  1. function sendAJAX(data) {   
    2. 
  
  
  
  
  2.     $.ajax({   
    3. 
  
  
  
  
  3.         type: "GET",   
    4. 
  
  
  
  
  4.         contentType: "application/json",   
    5. 
  
  
  
  
  5.         url: "Service.svc/DoWork",   
    6. 
  
  
  
  
  6.         data: data,   
    7. 
  
  
  
  
  7.         processData: false,   
    8. 
  
  
  
  
  8.         success: function(msg){   
    9. 
  
  
  
  
  9.                 alert( "Data Saved!" );   
    10. 
  
  
  
  
  10.         },   
    11. 
  
  
  
  
  11.         error:function(XMLHttpRequest, textStatus, errorThrown){   
    12. 
  
  
  
  
  12.                 alert( "Error Occured!" );   
    13. 
  
  
  
  
  13.         }   
    14. 
  
  
  
  
  14.     });   
    15. 
  
  
  
  
  15. }  
    16. 
  
  
  
  
  16.   
    17.

然而很不幸運(yùn)，這里有一個(gè)小的問(wèn)題，我們必須發(fā)送真正的JSON字符串，作為參數(shù)傳遞。但還沒(méi)有簡(jiǎn)單的方法讓JSON對(duì)象轉(zhuǎn)換為字符串，如果你試了data.toString()，得到的會(huì)是一個(gè) "[object Object]"值。這不是我們想要的。

所以在這里我們要修改方法使得它能將JSON轉(zhuǎn)換成字符串。

 
 
 
 
    
  
  
  
  
  1. function json2string(strObject) {   
    2. 
  
  
  
  
  2. var c, i, l, s = '', v, p;   
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. switch (typeof strObject) {   
    5. 
  
  
  
  
  5. case 'object':   
    6. 
  
  
  
  
  6. if (strObject) {   
    7. 
  
  
  
  
  7. if (strObject.length && typeof strObject.length == 'number') {   
    8. 
  
  
  
  
  8. for (i = 0; i < strObject.length; ++i) {   
    9. 
  
  
  
  
  9.      v = json2string(strObject[i]);   
    10. 
  
  
  
  
  10. if (s) {   
    11. 
  
  
  
  
  11.       s += ',';   
    12. 
  
  
  
  
  12.      }   
    13. 
  
  
  
  
  13.      s += v;   
    14. 
  
  
  
  
  14.     }   
    15. 
  
  
  
  
  15. return '[' + s + ']';   
    16. 
  
  
  
  
  16.    } else if (typeof strObject.toString != 'undefined') {   
    17. 
  
  
  
  
  17. for (i in strObject) {   
    18. 
  
  
  
  
  18.      v = strObject[i];   
    19. 
  
  
  
  
  19. if (typeof v != 'undefined' && typeof v != 'function') {   
    20. 
  
  
  
  
  20.       v = json2string(v);   
    21. 
  
  
  
  
  21. if (s) {   
    22. 
  
  
  
  
  22.        s += ',';   
    23. 
  
  
  
  
  23.       }   
    24. 
  
  
  
  
  24.       s += json2string(i) + ':' + v;   
    25. 
  
  
  
  
  25.      }   
    26. 
  
  
  
  
  26.     }   
    27. 
  
  
  
  
  27. return '{' + s + '}';   
    28. 
  
  
  
  
  28.    }   
    29. 
  
  
  
  
  29.   }   
    30. 
  
  
  
  
  30. return 'null';   
    31. 
  
  
  
  
  31. case 'number':   
    32. 
  
  
  
  
  32. return isFinite(strObject) ? String(strObject) : 'null';   
    33. 
  
  
  
  
  33. case 'string':   
    34. 
  
  
  
  
  34.   l = strObject.length;   
    35. 
  
  
  
  
  35.   s = '"';   
    36. 
  
  
  
  
  36. for (i = 0; i < l; i += 1) {   
    37. 
  
  
  
  
  37.    c = strObject.charAt(i);   
    38. 
  
  
  
  
  38. if (c >= ' ') {   
    39. 
  
  
  
  
  39. if (c == '\\' || c == '"') {   
    40. 
  
  
  
  
  40.      s += '\\';   
    41. 
  
  
  
  
  41.     }   
    42. 
  
  
  
  
  42.     s += c;   
    43. 
  
  
  
  
  43.    } else {   
    44. 
  
  
  
  
  44. switch (c) {   
    45. 
  
  
  
  
  45. case '\b':   
    46. 
  
  
  
  
  46.       s += '\\b';   
    47. 
  
  
  
  
  47. break;   
    48. 
  
  
  
  
  48. case '\f':   
    49. 
  
  
  
  
  49.       s += '\\f';   
    50. 
  
  
  
  
  50. break;   
    51. 
  
  
  
  
  51. case '\n':   
    52. 
  
  
  
  
  52.       s += '\\n';   
    53. 
  
  
  
  
  53. break;   
    54. 
  
  
  
  
  54. case '\r':   
    55. 
  
  
  
  
  55.       s += '\\r';   
    56. 
  
  
  
  
  56. break;   
    57. 
  
  
  
  
  57. case '\t':   
    58. 
  
  
  
  
  58.       s += '\\t';   
    59. 
  
  
  
  
  59. break;   
    60. 
  
  
  
  
  60. default:   
    61. 
  
  
  
  
  61.       c = c.charCodeAt();   
    62. 
  
  
  
  
  62.       s += '\\u00' + Math.floor(c / 16).toString(16) +   
    63. 
  
  
  
  
  63.        (c % 16).toString(16);   
    64. 
  
  
  
  
  64.     }   
    65. 
  
  
  
  
  65.    }   
    66. 
  
  
  
  
  66.   }   
    67. 
  
  
  
  
  67. return s + '"';   
    68. 
  
  
  
  
  68. case 'boolean':   
    69. 
  
  
  
  
  69. return String(strObject);   
    70. 
  
  
  
  
  70. default:   
    71. 
  
  
  
  
  71. return 'null';   
    72. 
  
  
  
  
  72. }   
    73. 
  
  
  
  
  73. }   
    74. 
  
  
  
  
  74.    
    75.

現(xiàn)在我們有一個(gè)方法可以將JSON對(duì)象轉(zhuǎn)成我們所需要的字符串，現(xiàn)在我們回過(guò)頭去修改我們之前定義的 "mydata" 變量，我們應(yīng)當(dāng)按下面去應(yīng)用所寫(xiě)的json2string方法。

 
 
 
 
    
  
  
  
  
  1. var mydata = { "Name":"Denny", "Age":23, "Shoes":["Nike","Osiris","Etnies"] };   
    2. 
  
  
  
  
  2. var jsonStr = "p=" + json2string(mydata);  
    3.

注意在下面我準(zhǔn)備了"p=" 字符在我們的JSON字符串中，“p”對(duì)應(yīng)于"DoWork()" 方法中的參數(shù)，當(dāng)我們將參數(shù)改名為"Dude" ( 例如DoWork(Person Dude) )時(shí)，我們也必須將此處替換為"Dude="

現(xiàn)在我們準(zhǔn)備好了查詢字符串，我們參看到我們?nèi)绾握{(diào)用服務(wù)： 

 
 
 
 
    
  
  
  
  
  1. http://www.dennydotnet.com/Service.svc/DoWork/?p={ "Name":"Denny", "Age":23, "Shoes":["Nike","Osiris","Etnies"] } 
    2.

你將接收到一個(gè)已經(jīng)為URL編碼處理過(guò)的值，如下： 

 
 
 
 
    
  
  
  
  
  1. http://www.dennydotnet.com/Service.svc/DoWork/?p=%7b+%22Name%22%3a%22Denny%22%2c+%22Age%22%3a23%2c+%22Shoes%22%3a%5b%22Nike%22%2c%22Osiris%22%2c%22Etnies%22%5d+%7d%3b 
    2.

緊接著我們?nèi)フ{(diào)用"SendAjax()" javascript 方法，現(xiàn)在能夠調(diào)試我們的服務(wù)并驗(yàn)證數(shù)據(jù)是否被傳遞到服務(wù)。如下圖

現(xiàn)在你僅需要在DoWork()方法里實(shí)現(xiàn)自己的邏輯。注意無(wú)論你如何怎么去做 在WCF的服務(wù)端，它已經(jīng)為你做好了。


網(wǎng)頁(yè)標(biāo)題：jQuery調(diào)用WCF服務(wù)傳遞JSON對(duì)象
轉(zhuǎn)載注明：http://www.5511xx.com/article/cocgsgp.html