注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天涯倦客的博客

祝福你朋友永远快乐!

 
 
 

日志

 
 

jQuery Ajax 方法调用 Asp.Net WebService 的详细例子(原创)  

2011-10-12 09:21:24|  分类: asp.net |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

ws.aspx 代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head id="Head1" runat="server">      <title></title>        <script src="jquery.js" type="text/javascript"></script>        <style type="text/css">          .hover          {              cursor: pointer; /*小手*/              background: #ffc; /*背景*/          }          .button          {              width: 150px;              float: left;              text-align: center;              margin: 10px;              padding: 10px;              border: 1px solid #888;          }          #dictionary          {              text-align: center;              font-size: 18px;              clear: both;              border-top: 3px solid #888;          }          #loading          {              border: 1px #000 solid;              background-color: #eee;              padding: 20px;              margin: 100px 0 0 200px;              position: absolute;              display: none;          }          #switcher          {          }      </style>        <script type="text/javascript">              //无参数调用          $(document).ready(function() {              $('#btn1').click(function() {                  $.ajax({                      type: "POST",   //访问WebService使用Post方式请求                      contentType: "application/json", //WebService 会返回Json类型                      url: "WebService1.asmx/HelloWorld", //调用WebService的地址和方法名称组合 ---- WsURL/方法名                      data: "{}",         //这里是要传递的参数,格式为 data: "{paraName:paraValue}",下面将会看到                             dataType: 'json',                      success: function(result) {     //回调函数,result,返回值                          $('#dictionary').append(result.d);                      }                  });              });          });              //有参数调用          $(document).ready(function() {              $("#btn2").click(function() {                  $.ajax({                      type: "POST",                      contentType: "application/json",                      url: "WebService1.asmx/GetWish",                      data: "{value1:'心想事成',value2:'万事如意',value3:'牛牛牛',value4:2009}",                      dataType: 'json',                      success: function(result) {                          $('#dictionary').append(result.d);                      }                  });              });          });                              //返回集合(引用自网络,很说明问题)          $(document).ready(function() {              $("#btn3").click(function() {                  $.ajax({                      type: "POST",                      contentType: "application/json",                      url: "WebService1.asmx/GetArray",                      data: "{i:10}",                      dataType: 'json',                      success: function(result) {                          $(result.d).each(function() {                              //alert(this);                              $('#dictionary').append(this.toString() + " ");                              //alert(result.d.join(" | "));                          });                      }                  });              });          });              //返回复合类型          $(document).ready(function() {              $('#btn4').click(function() {                  $.ajax({                      type: "POST",                      contentType: "application/json",                      url: "WebService1.asmx/GetClass",                      data: "{}",                      dataType: 'json',                      success: function(result) {                          $(result.d).each(function() {                              //alert(this);                              $('#dictionary').append(this['ID'] + " " + this['Value']);                              //alert(result.d.join(" | "));                          });                        }                  });              });          });            //返回DataSet(XML)          $(document).ready(function() {              $('#btn5').click(function() {                  $.ajax({                      type: "POST",                      url: "WebService1.asmx/GetDataSet",                      data: "{}",                      dataType: 'xml', //返回的类型为XML ,和前面的Json,不一样了                      success: function(result) {                      //演示一下捕获                          try {                                 $(result).find("Table1").each(function() {                                  $('#dictionary').append($(this).find("ID").text() + " " + $(this).find("Value").text());                              });                          }                          catch (e) {                              alert(e);                              return;                          }                      },                      error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数                          if (status == 'error') {                              alert(status);                          }                      }                  });              });          });                  //Ajax 为用户提供反馈,利用ajaxStart和ajaxStop 方法,演示ajax跟踪相关事件的回调,他们两个方法可以添加给jQuery对象在Ajax前后回调          //但对与Ajax的监控,本身是全局性的          $(document).ready(function() {              $('#loading').ajaxStart(function() {                  $(this).show();              }).ajaxStop(function() {                  $(this).hide();              });          });            // 鼠标移入移出效果,多个元素的时候,可以使用“,”隔开          $(document).ready(function() {              $('div.button').hover(function() {                  $(this).addClass('hover');              }, function() {                  $(this).removeClass('hover');              });          });                          </script>    </head>  <body>      <form id="form1" runat="server">      <div id="switcher">          <h2>              jQuery 的WebServices 调用</h2>          <div class="button" id="btn1">              HelloWorld</div>          <div class="button" id="btn2">              传入参数</div>          <div class="button" id="btn3">              返回集合</div>          <div class="button" id="btn4">              返回复合类型</div>          <div class="button" id="btn5">              返回DataSet(XML)</div>      </div>      <div id="loading">          服务器处理中,请稍后。      </div>      <div id="dictionary">      </div>      </form>  </body>  </html>  

WebService1.asmx.cs

using System;  using System.Collections.Generic;  using System.Linq;  using System.Web;  using System.Web.Services;  using System.Data;    namespace jQuery.Learning  {      /// <summary>      /// WebService1 的摘要说明      /// </summary>      [WebService(Namespace = "http://tempuri.org/")]      [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]      [System.ComponentModel.ToolboxItem(false)]      // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。      [System.Web.Script.Services.ScriptService]      public class WebService1 : System.Web.Services.WebService      {          /// <summary>          /// 无参数          /// </summary>          /// <returns></returns>          [WebMethod]          public string HelloWorld()          {              return "Hello World ";          }            /// <summary>          /// 带参数          /// </summary>          /// <param name="value1"></param>          /// <param name="value2"></param>          /// <param name="value3"></param>          /// <param name="value4"></param>          /// <returns></returns>          [WebMethod]          public string GetWish(string value1, string value2, string value3, int value4)          {              return string.Format("祝您在{3}年里 {0}、{1}、{2}", value1, value2, value3, value4);          }            /// <summary>          /// 返回集合          /// </summary>          /// <param name="i"></param>          /// <returns></returns>          [WebMethod]          public List<int> GetArray(int i)          {              List<int> list = new List<int>();                while (i >= 0)              {                  list.Add(i--);              }                return list;          }            /// <summary>          /// 返回一个复合类型          /// </summary>          /// <returns></returns>          [WebMethod]          public Class1 GetClass()          {              return new Class1 { ID = "1", Value = "牛年大吉" };          }              /// <summary>          /// 返回XML          /// </summary>          /// <returns></returns>          [WebMethod]          public DataSet GetDataSet()          {              DataSet ds = new DataSet();              DataTable dt = new DataTable();              dt.Columns.Add("ID", Type.GetType("System.String"));              dt.Columns.Add("Value", Type.GetType("System.String"));              DataRow dr = dt.NewRow();              dr["ID"] = "1";              dr["Value"] = "新年快乐";              dt.Rows.Add(dr);              dr = dt.NewRow();              dr["ID"] = "2";              dr["Value"] = "万事如意";              dt.Rows.Add(dr);              ds.Tables.Add(dt);              return ds;          }          }      //自定义的类,只有两个属性      public class Class1      {          public string ID { get; set; }          public string Value { get; set; }      }  }
  评论这张
 
阅读(448)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017