jquery调用webservice

关键字:jquery webservice web服务 asmx asp.net

  使用jquery访问webservice,要和请求的一般的url路径一样,需要配置过web.config文件,具体参考web服务因URL意外地以/**结束,请求格式无法识别,通过配置web.confg文件后,就不需要构造soap信封,而可以使用一般的get或者post键值对到web服务,就可以获取返回值了。

  需要注意的是,请求web服务的url格式为“xxxxx.asmx/方法名称”这种格式,其中方法名称是区分大小写的。

测试代码如下

web.config,注意要配置webservices的protocols,这样就不需要构造soap信封了。
+展开
-XML
<?xml version="1.0" encoding="utf-8" ?>
<configuration>
      <system.web>
         <webServices>
           <protocols>
             <add   name="HttpPost"   />
             <add   name="HttpGet"   />
           </protocols>
         </webServices>
       </system.web>
</configuration>


op.asmx
+展开
-C#
<%@ WebService Language="C#" Class="op" %>

using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml;
[WebService(Namespace = "http:///showbo/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class op : System.Web.Services.WebService
{
    [WebMethod]
    public  int Add(int a, int b)
    {
        return a + b;
    }
    [WebMethod]
    public int Multiply(int a, int b)
    {
        return a * b;
    }
    [WebMethod]
    public string Now()
    {
        return DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");
    }
}


test.html
+展开
-HTML
<!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>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>jQuery访问web服务</title>
    <script src="jq.js" type="text/javascript"></script> 
    <script type="text/javascript">
        var SERVICE_URL = "op.asmx/"
        function callserver() {
          var rxInt=/^\-?\d+$/,a=$('#txtA').val(),b=$('#txtB').val(),func=$('#selOP').val();
          if(!rxInt.test(a)){alert('请输入a并且为数字!');$('#txtA').select();return false;}
          if(!rxInt.test(b)){alert('请输入b并且为数字!');$('#txtB').select();return false;}
          $.ajax({
             dataType: "xml",
             data:{a:a,b:b},
             url:SERVICE_URL+func,
             type:"POST",
             success: function(domEL) {alert(domEL)
               $('#txtResult').val(domEL.getElementsByTagName('int')[0].firstChild.nodeValue);
             }
             ,error:function(xhr){alert('ERROR\n\n'+xhr.responseText);}
          });
        }
        
        function Now(){
          $.ajax({
            url:SERVICE_URL+"Now",
            type:'POST',
            dataType:'xml',
            data:'',
            success:function(domEL){
              alert(domEL.getElementsByTagName('string')[0].firstChild.nodeValue)
            }
          });
        }
    </script> 
    
</head>
<body>
a:<input type="text" id="txtA" style="width:50px" />
<select id="selOP"><option value="Add">+</option><option value="Multiply">*</option></select>
b:<input type="text" id="txtB" style="width:50px" />=<input type="text" id="txtResult" style="width:50px" readonly="readonly" />
<br >
<input type="button" value="执行计算" onclick="callserver()" /><input type="button" value="输出服务器时间" onclick="Now()" />
</body>
</html>

加支付宝好友偷能量挖...


原创文章,转载请注明出处:jquery调用webservice

评论(0)Web开发网
阅读(228)喜欢(0)JavaScript/Ajax开发技巧