最近身边的一个朋友做项目,其中有一个模块需求要求使用js去调用webService,让我帮着想想招,因为以前却实没有这么做过。经过大约一个小时的测试,成功了。发现这个东东写出来之后是这么简单。当初是我想复杂了。分享一下测试时写的代码,希望对大家有所帮助。
WebService文件内容
- using System;
- using System.Web;
- using System.Collections;
- using System.Collections.Generic;
- using System.Web.Services;
- using System.Web.Services.Protocols;
- using System.Web.UI.MobileControls;
- /// <summary>
- /// JsWebService 的摘要说明
- /// </summary>
- [WebService(Namespace = "http://tempuri.org/")]
- [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
- [System.Web.Script.Services.ScriptService]
- public class JsWebService : System.Web.Services.WebService
- {
- public JsWebService()
- {
- //如果使用设计的组件,请取消注释以下行
- //InitializeComponent();
- }
- [WebMethod]
- public string GetString()
- {
- return "GetString";
- }
- [WebMethod]
- public string GetString(string name)
- {
- return string.Format("{0}欢迎您的到来!", name);
- }
- [WebMethod]
- public List<string> GetList()
- {
- List<string> listStr = new List<string>();
- for (int i = 0; i < 10; i++)
- {
- listStr.Add("test" + i);
- }
- return listStr;
- }
- [WebMethod]
- public List<JsWebServiceObject> GetObjectList()
- {
- List<JsWebServiceObject> objs = new List<JsWebServiceObject>();
- for (int i = 0; i < 10; i++)
- {
- JsWebServiceObject obj = new JsWebServiceObject("name" + i, i + 20);
- objs.Add(obj);
- }
- return objs;
- }
- }
调用WebService的aspx页面代码
- <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <title>Js调用WebService</title>
- <script type="text/javascript">
- function GetString()
- {
- JsWebService.GetString(GetStringCallBack); //在WebService中调用方法,并设置回调函数
- }
- function GetStringCallBack(result)
- {
- alert(result);
- }
- function GetStringParam(name)
- {
- JsWebService.GetString(name,GetStringParamCallBack); //在WebService中调用方法,并设置回调函数,如果此方法中带有参数则在回调函数前加入此参数。
- }
- function GetStringParamCallBack(result)
- {
- alert(result);
- }
- function GetList()
- {
- JsWebService.GetList(GetListCallBack);
- }
- function GetListCallBack(result)
- {
- if(result.length!=0)
- {
- for(var i=0;i<result.length;i++)
- {
- document.getElementById("contentDivGetList").innerHTML += result[i] + "<br/>";
- }
- }
- }
- function GetObjectList()
- {
- JsWebService.GetObjectList(GetObjectListCallBack);
- }
- function GetObjectListCallBack(result)
- {
- if(result.length!=0)
- {
- for(var i=0;i<result.length;i++)
- {
- document.getElementById("contentDivGetObjectList").innerHTML += "姓名:" + result[i].Name + " 年龄:" + result[i].Age + "<br/>";
- }
- }
- }
- </script>
- </head>
- <body>
- <form id="form1" runat="server">
- <asp:ScriptManager ID="smJs" runat="server" >
- <Services>
- <asp:ServiceReference Path="WebService/JsWebService.asmx" />
- </Services>
- </asp:ScriptManager>
- <div>
- <input type="button" name="btnJsWebService" value="GetString" onclick="GetString()" />
- <input type="button" name="butJsWebService" value="GetList" onclick="GetList()" />
- <input type="button" name="butJsWebService" value="GetObjectList" onclick="GetObjectList()" />
- <input type="button" name="butJsWebService" value="GetStringParam" onclick="GetStringParam('js调用WebService')" />
- <div id="contentDivGetList"></div>
- <div id="contentDivGetObjectList"></div>
- </div>
- </form>
- </body>
- </html>