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()
{
return“HelloWortgcodeld“;
} ///
///传入参数
///
///
///
[WebMethod]
publicstringHello(stringname)
{
returnstring.Format(“Hello{0}“,name);
} ///
///返回泛型列表
///
///
///
[WebMethod]
publicListint>CreateArray(inti)
{
Listint>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;}
}
[WebServiceBinding(ConformsTo=WsiProfiles.BasicProfile1_1)]
[ScriptService]//令WebService成功传入Json参数,并以Json形式返回结果
[GenerateScriptType(typeof(Person))]//不是必要,但推荐添加(如果Person里面再嵌套另一个复杂类型,则必要声明)
[ToolboxItem(false)]
publicclassWebService1:System.Web.Services.WebService
{
///
///无任何参数
///
///
[WebMethod]
publicstringHelloWorld()
{
return“HelloWortgcodeld“;
} ///
///传入参数
///
///
///
[WebMethod]
publicstringHello(stringname)
{
returnstring.Format(“Hello{0}“,name);
} ///
///返回泛型列表
///
///
///
[WebMethod]
publicListint>CreateArray(inti)
{
Listint>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=“true“CodeBehind=“WebForm1.atgcodespx.cs“Inherits=“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=”form1tgcode“runat=”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>
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=”form1tgcode“runat=”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 代码示例 Web 应用程序面临的一个最大挑战是支持不同版本的 Web 浏览器。能在 Safari 上运行的 JavaScript 代码不一定能在 Windows Internet Explorer (IE)、Firef…