jQuery调用WebService

2021年1月13日   |   by tgcode

1、编写4种WebService方法

[WebService(Namespace=http://tempuri.org/)]
[WebServiceBinding(ConformsTo
=WsiProfiles.BasicProfile1_1)]
[ScriptService]
//令WebService成功传入Json参数,并以Json形式返回结果
[GenerateScriptType(typeof(Person))]//不是必要,但推荐添加(如果Person里面再嵌套另一个复杂类型,则必要声明)
[ToolboxItem(false)]
publicclassWebService1:System.Web.Services.WebService
{
///
///无任何参数
///
///
[WebMethod]
publicstringHelloWorld()
{
returnHelloWortgcodeld;
}

///
///传入参数
///
///
///
[WebMethod]
publicstringHello(stringname)
{
returnstring.Format(Hello{0},name);
}

///
///返回泛型列表
///
///
///
[WebMethod]
publicListint>CreateArray(inti)
{
List
int>list=newListint>();

while(i>=0)
{
list.Add(i
);
}

returnlist;
}

///
///返回复杂类型
///
///
///
///
[WebMethod]
publicPersonGetPerson(stringname,intage)
{
returnnewPerson()
{
Name
=name,
Age
=age
};
}
}

///
///复杂类型
///
publicclassPerson
{
publicstringName{get;set;}

publicintAge{get;set;}
}


2、编写js调用以上方法

@PageLanguage=C#AutoEventWireup=trueCodeBehind=WebForm1.atgcodespx.csInherits=WebApplication1.WebForm1%>

<!–DOCTYPEhtmlPUBLIC”-//W3C//DTDXHTML1.0Transitional//EN””http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
htmlxmlns=”http://www.w3.org/1999/xhtml”>
headrunat=”server>
title>无标题页<!–title>
styletype=”text/css>
input
{
width
:200px;
}
<!–
style>

scripttype=”text/javascript”src=”jquery-1[1].2.6.min.js”><!–script>
scripttype=”text/javascript”>
$(
function(){

/*
1、WebService请求类型都为Post,WebService的Url为“[WebServiceUrl]/[WebMethod]”
2、contentType声明为Json
3、data要用Json的字符串格式传入
4、设置了dataType为json后,result就直接为返回的Json对象。

*/

//调用无参数方法
$(#btnHelloWorld).click(function(){
$.ajax({
type:
POST,
contentType:
application/json,
url:
WebService1.asmx/HelloWorld,
data:
{},
dataType:’json’,
success:
function(result){
alert(result.d);
}
});
});

//传入1个参数
$(#btnHello).click(function(){
$.ajax({
type:
POST,
contentType:
application/json,
url:
WebService1.asmx/Hello,
data:
{name:’KiMoGiGi’},
dataType:’json’,
success:
function(result){
alert(result.d);
}
});
});

//返回泛型列表
$(#btnArray).click(function(){
$.ajax({
type:
POST,
contentType:
application/json,
url:
WebService1.asmx/CreateArray,
data:
{i:10},
dataType:’json’,
success:
function(result){
alert(result.d.join(
|));
}
});
});

//返回复杂类型
$(#btnPerson).click(function(){
$.ajax({
type:
POST,
contentType:
application/json,
url:
WebService1.asmx/GetPerson,
data:
{name:’KiMoGiGi’,age:26},
dataType:’json’,
success:
function(result){
varperson=result.d;
varshowText=[];
for(varpinperson){
showText.push(p
+:+person[p]);
}
alert(showText.join(
rn));
}
});
});
});
<!–script>
<!–
head>
body>
formid=”form1tgcoderunat=”server”>
p>
inputtype=”button”id=”btnHelloWorld”value=”HelloWorld”/>
<!–p>
p>
inputtype=”button”id=”btnHello”value=”Hello”/>
<!–
p>
p>
inputtype=”button”id=”btnArray”value=”CreateArray”/>
<!–
p>
p>
inputtype=”button”id=”btnPerson”value=”GetPerson”/>
<!–
p>
<!–form>
<!–body>
<!–
html>

相关推荐: 高效 JavaScript 单元测试

  一个损坏的 JavaScript 代码示例   Web 应用程序面临的一个最大挑战是支持不同版本的 Web 浏览器。能在 Safari 上运行的 JavaScript 代码不一定能在 Windows Internet Explorer (IE)、Firef…