NET-使用Js调用WebService

 

注：JsWebServiceObject 此类是我做测试示例时为了测试js是否能调用webService中的复合类型而单独新建的一个类

　　此类中只有名字与年龄的属性。

最近身边的一个朋友做项目，其中有一个模块需求要求使用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 >

 

 示例下载地址：/Files/homezzm/Js调用WebService.rar 

 

转载于:https://www.cnblogs.com/homezzm/archive/2010/01/27/1657235.html