因为jquery丰富的插件,以及对ajax的支持,所以用它和服务器端进行数据交互肯定是少不了的。
asp.net ajax就是回味了,不过关于ajax调用服务器端的方法看是看了不少,今天动手去做个demo的时候
还出了点小问题,先记下了,最近肯定会用的。
先来看看jquery方式:
要调用webservice,肯定是建一个webservice了,文件名称就叫AjaxService.asmx,内容归就很简单了,
提供一个方法,返回一个简单的string数据类型,还是注意在类名前加上
[System.Web.Script.Services.ScriptService],在方法前加上[WebService]的标记,为什么我也不知道
,就是因为不加的话就调用不了,所以加上了。这里就只有一个方法:
[WebMethod]
public string sayHello(string s)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
return "Hello " + s;
}
新建一个测试页面default.aspx,在代码里也添加一个方法,也是返回简单的数据类型,该方法想要被js
调用的话还必须是静态的,有点欺人!这都算了,还要加上 [System.Web.Services.WebMethod]才愿意
,方法如下:
[System.Web.Services.WebMethod]
public static string AjaxServiceTest(string str)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
return string.Format("Hello,{0}", str);
}
前台代码很简单,就提供一个让输入的文本框,两个按钮:
<form id="form1" runat="server">
<div>
<h1>返回简单的数据类型</h1>
<hr />
<input id="inputName" type="text" size="20" runat="server" />
<input id="btnService" type="button" value="调用WebServer方式"/>
<input id="btnAspx" type="button" value="调用页面方式"/>
<hr />
</div>
</form>
可以看到按钮上并没有onclick来绑定方法,这一点就是jquery牛比了,它来绑定就行了:
1
<script type="text/javascript" src="jquery-1.2.6.js"></script>
2
<script language="javascript" type="text/javascript">
3![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
$(function()
{
4
//调用webservice返回简单类型
5![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
$("#btnService").click(function()
{
6![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
$.ajax(
{
7
type: "POST",
8
contentType:"application/json;utf-8",
9
url: "AjaxService.asmx/AjaxServiceTest",
10
data:"{s:\""+$("#inputName").val()+"\"}",//传webservice方法的参数,s是方法的
11![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
12
参数,必须一致
13
14![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
success: function(data)
{
15
//将返回字符串转换为json对象
16
//如果
17
var json = null;
18![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
try
{
19
json=eval('(' + data + ')');
20![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}catch(e)
{
21
alert("返回字符串不是json格式!");
22
return;
23
}
24
alert(json.d);
25
}
26
});
27
})
28
//调用页面静态方法返回简单类型
29![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
$("#btnAspx").click(function()
{
30![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
$.ajax(
{
31
type: "POST",
32
contentType:"application/json;utf-8",
33
url: "Default.aspx/AjaxServiceTest",
34
data:"{str:\""+$("#inputName").val()+"\"}",//传到.cs静态方法的参数,str是方法
35![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
36
的参数,必须一致
37
38![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
success: function(data)
{
39
//将返回字符串转换为json对象
40
//如果
41
var json = null;
42![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
try
{
43
json=eval('(' + data + ')');
44![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}catch(e)
{
45
alert("返回字符串不是json格式!");
46
return;
47
}
48
alert(json.d);
49
}
50
});
51
})
52
53
})
54![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
55
</script>
运行效果就不说,输入“medal”,就弹出“hello,medal”。
asp.net ajax调用webservice方法返回复杂类型
既然是复杂类型,就新建一个类型了,就叫Users类吧,就四个属性:
1
public class Users
2![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
3
//属性Id
4
public int Id
5![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
6
get;
7
set;
8
}
9
//用户名
10
public string Name
11![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
12
get;
13
set;
14
}
15
//登陆密码
16
public string PassWord
17![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
18
get;
19
set;
20
}
21
//Email
22
public string Email
23![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
24
get;
25
set;
26
}
在webservice中来两个方法,一个是返回单个Users对象,一个返回多个Users对象:
[WebMethod]
public Users GetUser()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
Users objUser = new Users
{ Id = 1, Name = "medal", PassWord = "123456", Email =
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
"medal@126.com" };
return objUser;
}
//返回五个对象
[WebMethod]
public Users[] GetMoreUser()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
List<Users> objUsers = new List<Users>();
for (int i = 0; i < 5; i++)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
Users user = new Users
{ Id = i, Name = string.Format("medal{0}", i), Email
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
= string.Format("medal{0}@126.com", i), PassWord = string.Format("password{0}", i) };
objUsers.Add(user);
}
return objUsers.ToArray();
}
在类前面还的多两个标记,
[System.Web.Script.Services.ScriptService]
[GenerateScriptType(typeof(Users))]
第一个标记就不说了,要被调用必须加的,第二个就是返回类型是自定义的。
新建一个default.aspx页面来调用看看,html代码中,一个users对象以input把其属性显示出来,多个
users对象以table方式呈现,当然<scriptManager>控件和webservice的引用是必不可少的:
form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="UsersServices.asmx" />
</Services>
</asp:ScriptManager>
<div>
<h1>UserInfo:</h1>
<hr />
Id:<input id="UserId" type="text" /><br />
UserName:<input id="UserName" type="text" /><br />
PassWord:<input id="PassWord" type="text" /><br />
Email:<input id="Email" type="text" />
<hr />
<input id="btnGet" type="button" value="GetUser" onclick="GetUser();" /><input
id="btnGetAll" value="GetAllUser" type="button" onclick="GetAllUsers()"; /><br />
<div id="table"></div>
</div>
</form>
主角登场,js代码来了,都有注释的,不啰嗦了:
<script type="text/javascript">
//调用webservice中返回一个users的方法
function GetUser()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
//一定要加上命名空间
JqueryWebServices.UsersServices.GetUser
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
(FillUserList,ErrorHandler,TimeOutHandler);//
}
//调用webservice的返回五个users对象的方法
function GetAllUsers()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
//一定要加上命名空间
JqueryWebServices.UsersServices.GetMoreUser
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
(FillAllUserList,ErrorHandler,TimeOutHandler);
}
//五个users对象在table里呈现出来
function FillAllUserList(result)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
var str="<table
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
border=1><tr><td>Id</td><td>Name</td><td>PassWord</td><td>Email</td></tr>";
for(var i=0;i<result.length;i++)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
str=str+"<tr><td>"+result[i].Id+"</td><td>"+result[i].Name+"</td><td>"+result
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
[i].PassWord+"</td><td>"+result[i].Email+"</td>";
}
str=str+"</tr></table>";
var table=document.getElementById("table");
table.innerHTML=str;
}
//单个user在input里显示
function FillUserList(result)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
var userid=document.getElementById("UserId");
userid.value=result.Id;
var userName=document.getElementById("UserName");
userName.value=result.Name;
var PassWord=document.getElementById("PassWord");
PassWord.value=result.PassWord;
var Email=document.getElementById("Email");
Email.value=result.Email;
}
//用户上下文
function TimeOutHandler(result)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
alert("Timeout :" + result);
}
//异常情况
function ErrorHandler(result)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
var msg=result.get_exceptionType() + "\r\n";
msg += result.get_message() + "\r\n";
msg += result.get_stackTrace();
alert(msg);
}
</script>
效果是页面刚加载什么都没有,单击按钮之后数据加载出来。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步