使用JS调用WebService

1.新建一个WebApplication项目，取默认设置。

2.添加一个WebService，代码如下：

 1 namespace WebApplication1
 2 {
 3     /// <summary>
 4     /// WebService1 的摘要说明
 5     /// </summary>
 6     [WebService(Namespace = "http://tempuri.org/")]
 7     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
 8     [ToolboxItem(false)]
 9     // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
10     [System.Web.Script.Services.ScriptService]
11     public class WebService1 : System.Web.Services.WebService
12     {
13 
14         [WebMethod]
15         public string HelloWorldFun1()
16         {
17             return "Hello World";
18         }
19         [WebMethod]
20         public string HelloWorldFun2(string str)
21         {
22             return "Hello World,"+str;
23         }
24     }
25 }

3.准备好WebService后，编辑Default.aspx文件。代码如下：

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
 2 
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 
 5 <html xmlns="http://www.w3.org/1999/xhtml">
 6 
 7 <head runat="server">
 8     
 9     <title>JS调用WebService</title>
10     
11     <script type="text/javascript" language="javascript">
12         function func1() {
13             WebApplication1.WebService1.HelloWorldFun1(onSuccess, onFail, 'Span1');
14         }
15 
16         function func2() {
17             var txt = document.getElementById('Text1').value;
18             WebApplication1.WebService1.HelloWorldFun2(txt, onSuccess, onFail, 'Span2');
19         }
20 
21         function onSuccess(value, context) {
22             document.getElementById(context).innerHTML = value;
23         }
24 
25         function onFail(value) {
26             alert(value);
27         }
28     </script>
29 </head>
30 
31 <body>
32     <form id="form1" runat="server">
33         <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
34             <Services>
35                 <asp:ServiceReference Path="~/WebService1.asmx" />
36             </Services>
37         </asp:ScriptManager>
38         <input id="Button1" type="button" value="button" onclick="func1()" />&nbsp;&nbsp;&nbsp;&nbsp;<span id="Span1"></span>
39         <hr />
40         <input id="Text1" type="text" /><input id="Button2" type="button" value="button" onclick="func2()" />&nbsp;&nbsp;&nbsp;&nbsp;<span id="Span2"></span>
41     </form>
42 </body>
43 </html>

操作说明：

1.页面中需要添加ScriptManager组件，然后在里面添加WebService引用声明。[这里的Pah可以换成网络上的 WebService路径。]

2.将ScriptManager的EnablePageMethods属性设置为True。[这是必须的，否则JS不知道该 WebService。]

3.调用的格式：namespace.class.method([param],[onsuccessJSHandle],[onfailHSHandle],context);

　　 其中：A、context为上下文关联参数，这里设置后，在调用成功的处理函数处可以调用。

　　　　　 B、onsuccessJSHandle 为调用成功后的处理函数。

　　　　　 C、onfailHSHandle 为调用失败后的处理函数。

4.WebService编写时需注意：

　　　　　A、WebService类前必须加 [System.Web.Script.Services.ScriptService]

　　　　　B、WebService方法前必须加 [WebMethod]

 

 

posted @ 2021-08-18 10:11  殇琉璃  阅读(1702)  评论(0)  编辑  收藏  举报