jQuery AJax调用asp.net webservers的实现代码

复制代码 代码如下:


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
 <title></title>
  <script src="https://www.jb51.net/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;
}
  
--></style><style type="text/css" bogus="1"><!--
.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;
}
  
--></style><style type="text/css" bogus="1" bogus="1">.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;
}
  </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 runat="server">
  <div>
    <h2>
      jQuery 的WebServices 调用</h2>
    <div>
      HelloWorld</div>
    <div>
      传入参数</div>
    <div>
      返回集合</div>
    <div>
      返回复合类型</div>
    <div>
      返回DataSet(XML)</div>
  </div>
  <div>
    服务器处理中,请稍后。
  </div>
  <div>
  </div>
  </form>
</body>
</html>


WebService1.asmx 代码

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjjspp.html