zoukankan      html  css  js  c++  java

  • json webservice

    这很常用，搜索了 一下博客园的“找找看”和谷歌，看到大部分都是转载于一两篇文章（而且来源还不是博客园），有的是简单的说一点无法运行，给初学者的调试和学习带来不方 便，我在这里将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>
    6.     <script src="jquery.js" type="text/javascript"></script>
    8.     <style type="text/css">
    9.         .hover
    10.         {
    11.             cursor: pointer; /*小手*/
    12.             background: #ffc; /*背景*/
    13.         }
    14.         .button
    15.         {
    16.             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>
    44.     <script type="text/javascript">
    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.         });
    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.         });
    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.                         });
    118.                     }
    119.                 });
    120.             });
    121.         });
    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.         });
    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.         });
    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>
    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>
    复制代码

    WebService1.asmx.cs

      1. using System;
      2. using System.Collections.Generic;
      3. using System.Linq;
      4. using System.Web;
      5. using System.Web.Services;
      6. using System.Data;
      8. namespace jQuery.Learning
      9. {
      10.     /// <summary>
      11.     /// WebService1 的摘要说明
      12.     /// </summary>
      13.     [WebService(Namespace = "http://tempuri.org/")]
      14.     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
      15.     [System.ComponentModel.ToolboxItem(false)]
      16.     // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
      17.     [System.Web.Script.Services.ScriptService]
      18.     public class WebService1 : System.Web.Services.WebService
      19.     {
      20.         /// <summary>
      21.         /// 无参数
      22.         /// </summary>
      23.         /// <returns></returns>
      24.         [WebMethod]
      25.         public string HelloWorld()
      26.         {
      27.             return "Hello World ";
      28.         }
      30.         /// <summary>
      31.         /// 带参数
      32.         /// </summary>
      33.         /// <param name="value1"></param>
      34.         /// <param name="value2"></param>
      35.         /// <param name="value3"></param>
      36.         /// <param name="value4"></param>
      37.         /// <returns></returns>
      38.         [WebMethod]
      39.         public string GetWish(string value1, string value2, string value3, int value4)
      40.         {
      41.             return string.Format("祝您在{3}年里 {0}、{1}、{2}", value1, value2, value3, value4);
      42.         }
      44.         /// <summary>
      45.         /// 返回集合
      46.         /// </summary>
      47.         /// <param name="i"></param>
      48.         /// <returns></returns>
      49.         [WebMethod]
      50.         public List<int> GetArray(int i)
      51.         {
      52.             List<int> list = new List<int>();
      54.             while (i >= 0)
      55.             {
      56.                 list.Add(i--);
      57.             }
      59.             return list;
      60.         }
      62.         /// <summary>
      63.         /// 返回一个复合类型
      64.         /// </summary>
      65.         /// <returns></returns>
      66.         [WebMethod]
      67.         public Class1 GetClass()
      68.         {
      69.             return new Class1 { ID = "1", Value = "牛年大吉" };
      70.         }
      73.         /// <summary>
      74.         /// 返回XML
      75.         /// </summary>
      76.         /// <returns></returns>
      77.         [WebMethod]
      78.         public DataSet GetDataSet()
      79.         {
      80.             DataSet ds = new DataSet();
      81.             DataTable dt = new DataTable();
      82.             dt.Columns.Add("ID", Type.GetType("System.String"));
      83.             dt.Columns.Add("Value", Type.GetType("System.String"));
      84.             DataRow dr = dt.NewRow();
      85.             dr["ID"] = "1";
      86.             dr["Value"] = "新年快乐";
      87.             dt.Rows.Add(dr);
      88.             dr = dt.NewRow();
      89.             dr["ID"] = "2";
      90.             dr["Value"] = "万事如意";
      91.             dt.Rows.Add(dr);
      92.             ds.Tables.Add(dt);
      93.             return ds;
      94.         }
      97.     }
      98.     //自定义的类，只有两个属性
      99.     public class Class1
      100.     {
      101.         public string ID { get; set; }
      102.         public string Value { get; set; }
      103.     }
      104. }
  • 相关阅读:
    KVM WEB管理工具——WebVirtMgr（二）日常配置
    在阿里云上遇见更好的Oracle（四）
    Django源码分析之权限系统_擒贼先擒王
    Django源码分析之server
    Django源码分析之执行入口
    HDFS常用文件操作
    排查实时tail功能cpu占用过高问题
    ZooKeeper完全分布式安装与配置
    Hadoop2.5.2集群部署（完全分布式）
    构造器
  • 原文地址：https://www.cnblogs.com/wahaccp/p/3282157.html
Copyright © 2011-2022 走看看