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

Bioinformatics home

 
 
 

日志

 
 

jQuery Ajax 方法调用 Asp.Net WebService 的详细例子  

2009-04-23 11:27:22|  分类: 编程 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
这很常用,搜索了一下博客园的“找找看”和谷歌,看到大部分都是转载于一两篇文章(而且来源还不是博客园),
有的是简单的说一点无法运行,给初学者的调试和学习带来不方便,
我在这里将jQuery Ajax 调用Aspx.Net WebService 的几个常用的方法做了一个整理,
提供给正在找这方面内容的博友,希望能给学习jQuery的朋友一点帮助,可以直接复制代码运行。
 
  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; }
  }
}
  评论这张
 
阅读(750)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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