JS调用Webservice
操作步骤：
1.新建一个WebApplication项目，取默认设置。
2.添加一个WebService，代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
using System.ComponentModel;using System.Web.Services;namespace WebApplication1{ /// <summary> /// WebService1 的摘要说明 /// </summary> [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [ToolboxItem(false)] // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。 [System.Web.Script.Services.ScriptService] public class WebService1 : System.Web.Services.WebService { [WebMethod] public string HelloWorldFun1() { return "Hello World"; } [WebMethod] public string HelloWorldFun2(string str) { return "Hello World,"+str; } }} |
3.准备好WebService后，编辑Default.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 runat="server">
<title>JS调用WebService</title>
<script type="text/javascript" language="javascript">
function func1()
{
WebApplication1.WebService1.HelloWorldFun1(onSuccess,onFail,'Span1');
}
function func2()
{
var txt=document.getElementById('Text1').value;
WebApplication1.WebService1.HelloWorldFun2(txt,onSuccess,onFail,'Span2');
}
function onSuccess(value,context)
{
document.getElementById(context).innerHTML=value;
}
function onFail(value)
{
alert(value);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
<Services>
<asp:ServiceReference Path="~/WebService1.asmx" />
</Services>
</asp:ScriptManager>
<input id="Button1" type="button" value="button" onclick="func1()" /> <span id="Span1"></span>
<hr />
<input id="Text1" type="text" /><input id="Button2" type="button" value="button" onclick="func2()" /> <span id="Span2"></span>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>JS调用WebService</title>
<script type="text/javascript" language="javascript">
function func1()
{
WebApplication1.WebService1.HelloWorldFun1(onSuccess,onFail,'Span1');
}
function func2()
{
var txt=document.getElementById('Text1').value;
WebApplication1.WebService1.HelloWorldFun2(txt,onSuccess,onFail,'Span2');
}
function onSuccess(value,context)
{
document.getElementById(context).innerHTML=value;
}
function onFail(value)
{
alert(value);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
<Services>
<asp:ServiceReference Path="~/WebService1.asmx" />
</Services>
</asp:ScriptManager>
<input id="Button1" type="button" value="button" onclick="func1()" /> <span id="Span1"></span>
<hr />
<input id="Text1" type="text" /><input id="Button2" type="button" value="button" onclick="func2()" /> <span id="Span2"></span>
</form>
</body>
</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]
