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

 1<script type="text/javascript" src="jquery-1.2.6.js"></script>
 2    <script language="javascript" type="text/javascript">
 3    $(function(){
 4        //调用webservice返回简单类型
 5         $("#btnService").click(function(){
 6            $.ajax({
 7               type: "POST",
 8               contentType:"application/json;utf-8",
 9               url: "AjaxService.asmx/AjaxServiceTest",
               data:"{s:\""+$("#inputName").val()+"\"}",//传webservice方法的参数，s是方法的

参数，必须一致
                                          
               success: function(data){
                   //将返回字符串转换为json对象
                   //如果
                   var json = null;
                   try{
                        json=eval('(' + data + ')');
                   }catch(e){
                    alert("返回字符串不是json格式!");
                    return;
                   }
                   alert(json.d);
               }
            });
        })
        //调用页面静态方法返回简单类型
         $("#btnAspx").click(function(){
            $.ajax({
               type: "POST",
               contentType:"application/json;utf-8",
               url: "Default.aspx/AjaxServiceTest",
               data:"{str:\""+$("#inputName").val()+"\"}",//传到.cs静态方法的参数，str是方法

的参数，必须一致
                                     
               success: function(data){
                   //将返回字符串转换为json对象
                   //如果
                   var json = null;
                   try{
                        json=eval('(' + data + ')');
                   }catch(e){
                    alert("返回字符串不是json格式!");
                    return;
                   }
                   alert(json.d);
               }
            });
        })
               
        })

    </script>

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

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

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

 1public class Users
 2    {
 3        //属性Id
 4        public int Id
 5        {
 6            get;
 7            set;
 8        }
 9        //用户名
        public string Name
        {
            get;
            set;
        }
        //登陆密码
        public string PassWord
        {
            get;
            set;
        }
        //Email
        public string Email
        {
            get;
            set;
        }

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

<script type="text/javascript">
    //调用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>

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