jquery和asp.net ajax两种方式调用webservice中的公用方法和.cs中的静态方法

因为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)

{

return "Hello " + s;

}

新建一个测试页面default.aspx,在代码里也添加一个方法，也是返回简单的数据类型，该方法想要被js

调用的话还必须是静态的，有点欺人！这都算了，还要加上 [System.Web.Services.WebMethod]才愿意

，方法如下：

[System.Web.Services.WebMethod]

public static string AjaxServiceTest(string str)

{

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牛比了，它来绑定就行了：

$(function(){
4

//调用webservice返回简单类型
5

$("#btnService").click(function(){
6

$.ajax({
7

type: "POST",
8

contentType:"application/json;utf-8",
9

url: "AjaxService.asmx/AjaxServiceTest",
10

data:"{s:\""+$("#inputName").val()+"\"}",//传webservice方法的参数，s是方法的
11

参数，必须一致
13

success: function(data){
15

//将返回字符串转换为json对象
16

//如果
17

var json = null;
18

try{
19

json=eval('(' + data + ')');
20

}catch(e){
21

alert("返回字符串不是json格式!");
22

return;
23

}
24

alert(json.d);
25

}
26

});
27

})
28

//调用页面静态方法返回简单类型
29

$("#btnAspx").click(function(){
30

$.ajax({
31

type: "POST",
32

contentType:"application/json;utf-8",
33

url: "Default.aspx/AjaxServiceTest",
34

data:"{str:\""+$("#inputName").val()+"\"}",//传到.cs静态方法的参数，str是方法
35

的参数，必须一致
37

success: function(data){
39

//将返回字符串转换为json对象
40

//如果
41

var json = null;
42

try{
43

json=eval('(' + data + ')');
44

}catch(e){
45

alert("返回字符串不是json格式!");
46

return;
47

}
48

alert(json.d);
49

}
50

});
51

})
52

})
54

</script>

运行效果就不说，输入“medal”，就弹出“hello,medal”。

asp.net ajax调用webservice方法返回复杂类型

既然是复杂类型，就新建一个类型了，就叫Users类吧，就四个属性：

public class Users
2

{
3

//属性Id
4

public int Id
5

{
6

get;
7

set;
8

}
9

//用户名
10

public string Name
11

{
12

get;
13

set;
14

}
15

//登陆密码
16

public string PassWord
17

{
18

get;
19

set;
20

}
21

//Email
22

public string Email
23

{
24

get;
25

set;
26

}

在webservice中来两个方法，一个是返回单个Users对象，一个返回多个Users对象：

[WebMethod]

public Users GetUser()

{

Users objUser = new Users { Id = 1, Name = "medal", PassWord = "123456", Email =

"medal@126.com" };

return objUser;

}

//返回五个对象

[WebMethod]

public Users[] GetMoreUser()

{

List<Users> objUsers = new List<Users>();

for (int i = 0; i < 5; i++)

{

Users user = new Users { Id = i, Name = string.Format("medal{0}", i), Email

= 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代码来了，都有注释的，不啰嗦了：

//调用webservice中返回一个users的方法

function GetUser()

{

//一定要加上命名空间

JqueryWebServices.UsersServices.GetUser

(FillUserList,ErrorHandler,TimeOutHandler);//

}

//调用webservice的返回五个users对象的方法

function GetAllUsers()

{

//一定要加上命名空间

JqueryWebServices.UsersServices.GetMoreUser

(FillAllUserList,ErrorHandler,TimeOutHandler);

}

//五个users对象在table里呈现出来

function FillAllUserList(result)

{

var str="<table

border=1><tr><td>Id</td><td>Name</td><td>PassWord</td><td>Email</td></tr>";

for(var i=0;i<result.length;i++)

{

str=str+"<tr><td>"+result[i].Id+"</td><td>"+result[i].Name+"</td><td>"+result

[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)

{

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)

{

alert("Timeout :" + result);

}

//异常情况

function ErrorHandler(result)

{

var msg=result.get_exceptionType() + "\r\n";

msg += result.get_message() + "\r\n";

msg += result.get_stackTrace();

alert(msg);

}

</script>

效果是页面刚加载什么都没有，单击按钮之后数据加载出来。