中国第一Ajax站长门户:www.okajax.com   虚拟主机 域名注册 云主机

使用jQuery调用Asp.Net WebService - okajax.com - Ajax中国

我要投稿 会员登陆 RSS订阅 本站推荐:
您的位置主页 > Ajax技术 > Ajax框架学习 > jquery.js > 使用jQuery调用Asp.Net WebService

使用jQuery调用Asp.Net WebService

2010-09-28    文章来源:互联网    浏览次数:

我在这里将jQuery Ajax 调用Aspx.Net WebService 的几个常用的方法做了一个整理,提供给正在找这方面内容的朋友,希望能给学习jQuery的朋友一点帮助,可以直接复制代码运行。

ws.aspx 代码

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  2. <html xmlns="http://www.w3.org/1999/xhtml">   
  3. <head id="Head1" runat="server">   
  4. <title></title>   
  5.  
  6. <script src="jquery.js" type="text/javascript"></script>   
  7.  
  8. <style type="text/css">   
  9. .hover   
  10. {   
  11. cursor: pointer; /*小手*/   
  12. background: #ffc; /*背景*/   
  13. }   
  14. .button   
  15. {   
  16. width: 150px;   
  17. float: left;   
  18. text-align: center;   
  19. margin: 10px;   
  20. padding: 10px;   
  21. border: 1px solid #888;   
  22. }   
  23. #dictionary   
  24. {   
  25. text-align: center;   
  26. font-size: 18px;   
  27. clear: both;   
  28. border-top: 3px solid #888;   
  29. }   
  30. #loading   
  31. {   
  32. border: 1px #000 solid;   
  33. background-color: #eee;   
  34. padding: 20px;   
  35. margin: 100px 0 0 200px;   
  36. position: absolute;   
  37. display: none;   
  38. }   
  39. #switcher   
  40. {   
  41. }   
  42. </style>   
  43.  
  44. <script type="text/javascript">   
  45.  
  46.  
  47. //无参数调用   
  48. $(document).ready(function() {   
  49. $('#btn1').click(function() {   
  50. $.ajax({   
  51. type: "POST", //访问WebService使用Post方式请求   
  52. contentType: "application/json", //WebService 会返回Json类型   
  53. url: "WebService1.asmx/HelloWorld", //调用WebService的地址和方法名称组合 ---- WsURL/方法名   
  54. data: "{}", //这里是要传递的参数,格式为 data: "{paraName:paraValue}",下面将会看到   
  55. dataType: 'json',   
  56. success: function(result) { //回调函数,result,返回值   
  57. $('#dictionary').append(result.d);   
  58. }   
  59. });   
  60. });   
  61. });   
  62.  
  63.  
  64. //有参数调用   
  65. $(document).ready(function() {   
  66. $("#btn2").click(function() {   
  67. $.ajax({   
  68. type: "POST",   
  69. contentType: "application/json",   
  70. url: "WebService1.asmx/GetWish",   
  71. data: "{value1:'心想事成',value2:'万事如意',value3:'牛牛牛',value4:2009}",   
  72. dataType: 'json',   
  73. success: function(result) {   
  74. $('#dictionary').append(result.d);   
  75. }   
  76. });   
  77. });   
  78. });   
  79.  
  80.  
  81. //返回集合(引用自网络,很说明问题)   
  82. $(document).ready(function() {   
  83. $("#btn3").click(function() {   
  84. $.ajax({   
  85. type: "POST",   
  86. contentType: "application/json",   
  87. url: "WebService1.asmx/GetArray",   
  88. data: "{i:10}",   
  89. dataType: 'json',   
  90. success: function(result) {   
  91. $(result.d).each(function() {   
  92. //alert(this);   
  93. $('#dictionary').append(this.toString() + " ");   
  94. //alert(result.d.join(" | "));   
  95. });   
  96. }   
  97. });   
  98. });   
  99. });   
  100.  
  101.  
  102. //返回复合类型   
  103. $(document).ready(function() {   
  104. $('#btn4').click(function() {   
  105. $.ajax({   
  106. type: "POST",   
  107. contentType: "application/json",   
  108. url: "WebService1.asmx/GetClass",   
  109. data: "{}",   
  110. dataType: 'json',   
  111. success: function(result) {   
  112. $(result.d).each(function() {   
  113. //alert(this);   
  114. $('#dictionary').append(this['ID'] + " " + this['Value']);   
  115. //alert(result.d.join(" | "));   
  116. });   
  117.  
  118. }   
  119. });   
  120. });   
  121. });   
  122.  
  123. //返回DataSet(XML)   
  124. $(document).ready(function() {   
  125. $('#btn5').click(function() {   
  126. $.ajax({   
  127. type: "POST",   
  128. url: "WebService1.asmx/GetDataSet",   
  129. data: "{}",   
  130. dataType: 'xml', //返回的类型为XML ,和前面的Json,不一样了   
  131. success: function(result) {   
  132. //演示一下捕获   
  133. try {   
  134. $(result).find("Table1").each(function() {   
  135. $('#dictionary').append($(this).find("ID").text() + " " + $(this).find("Value").text());   
  136. });   
  137. }   
  138. catch (e) {   
  139. alert(e);   
  140. return;   
  141. }   
  142. },   
  143. error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数   
  144. if (status == 'error') {   
  145. alert(status);   
  146. }   
  147. }   
  148. });   
  149. });   
  150. });   
  151.  
  152.  
  153.  
  154.  
  155. //Ajax 为用户提供反馈,利用ajaxStart和ajaxStop 方法,演示ajax跟踪相关事件的回调,他们两个方法可以添加给jQuery对象在Ajax前后回调   
  156. //但对与Ajax的监控,本身是全局性的   
  157. $(document).ready(function() {   
  158. $('#loading').ajaxStart(function() {   
  159. $(this).show();   
  160. }).ajaxStop(function() {   
  161. $(this).hide();   
  162. });   
  163. });   
  164.  
  165. // 鼠标移入移出效果,多个元素的时候,可以使用“,”隔开   
  166. $(document).ready(function() {   
  167. $('div.button').hover(function() {   
  168. $(this).addClass('hover');   
  169. }, function() {   
  170. $(this).removeClass('hover');   
  171. });   
  172. });   
  173.  
  174.  
  175. </script>   
  176.  
  177. </head>   
  178. <body>   
  179. <form id="form1" runat="server">   
  180. <div id="switcher">   
  181. <h2>   
  182. jQuery 的WebServices 调用</h2>   
  183. <div class="button" id="btn1">   
  184. HelloWorld</div>   
  185. <div class="button" id="btn2">   
  186. 传入参数</div>   
  187. <div class="button" id="btn3">   
  188. 返回集合</div>   
  189. <div class="button" id="btn4">   
  190. 返回复合类型</div>   
  191. <div class="button" id="btn5">   
  192. 返回DataSet(XML)</div>   
  193. </div>   
  194. <div id="loading">   
  195. 服务器处理中,请稍后。   
  196. </div>   
  197. <div id="dictionary">   
  198. </div>   
  199. </form>   
  200. </body>   
  201. </html> 

 

文章评论(查看全部)

看不清楚?单击换一张。
loading.. 评论加载中....
关于我们 - 广告服务 - 版权隐私 - 免责声明 - RSS地图 - 网站地图 - 使用帮助 - 返回顶部