jQuery调用WebService

<div class="button" id="btn1"><a href="#">HelloWorld</div>
<div class="button" id="btn2"><a href="#">传入参数</a></div>
<div class="button" id="btn3"><a href="#">返回集合</a></div>
<div class="button" id="btn4"><a href="#">返回复合类型</a></div>
<div class="button" id="btn5"><a href="#">返回DataSet(XML)</a></div>
</div><div id="loading">服务器处理中，请稍后</div>
<div id="dictionary"></div>

WebService中：

01	[WebService(Namespace = "http://tempuri.org/")]
02	[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
03	//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
04	[System.Web.Script.Services.ScriptService]  //如果要用jquery调用WebService则取消前面的注释
05	public class WebService : System.Web.Services.WebService
06	{
07	 
08	    public WebService()
09	    {
10	 
11	        //如果使用设计的组件，请取消注释以下行
12	        //InitializeComponent();
13	    }
14	 
15	    [WebMethod]
16	    public string HelloWorld()
17	    {
18	        return "Hello World";
19	    }
20	 
21	    [WebMethod]
22	    public string GetWish(string value1, string value2, string value3, int value4)
23	    {
24	        return string.Format("祝您在{3}年里 {0}、{1}、{2}", value1, value2, value3, value4);
25	    }
26	 
27	    [WebMethod]
28	    public List<int> GetArray(int i)
29	    {
30	        List<int> list = new List<int>();
31	        while (i >= 0)
32	        {
33	            list.Add(i--);
34	        }
35	        return list;
36	    }
37	    [WebMethod]
38	    public Class1 GetClass()
39	    {
40	        Class1 a = new Class1();
41	        a.ID = "1";
42	        a.Value = "牛年大吉";
43	        return a;
44	    }
45	    [WebMethod]
46	    public DataSet GetDataSet()
47	    {
48	        DataSet ds = new DataSet();
49	        DataTable dt = new DataTable("Table1");
50	        dt.Columns.Add("ID", Type.GetType("System.String"));
51	        dt.Columns.Add("Value", Type.GetType("System.String"));
52	        DataRow dr = dt.NewRow();
53	        dr["ID"] = "1";
54	        dr["Value"] = "新年快乐";
55	        dt.Rows.Add(dr);
56	        dr = dt.NewRow();
57	        dr["ID"] = "2";
58	        dr["Value"] = "万事如意";
59	        dt.Rows.Add(dr);
60	        ds.Tables.Add(dt);
61	        return ds;
62	    }
63	}
64	//自定义的类，只有两个属性  
65	public class Class1
66	{
67	    public  string ID { get; set; }
68	    public  string Value { get; set; }
69	}

JS中：

<script language="javascript" type="text/javascript">
002	        //无参数
003	        $(function() {
004	            $("#btn1").click(function() {
005	                $.ajax({
006	                    type: "POST", //访问webservice使用POST方式请求
007	                    contentType: "application/json;utf-8", //WebService会返回Json类型
008	                    url: "WebService.asmx/HelloWorld", //调用WebService方法
009	                    data: "{}", //要传递的参数,没有传参时，也一定要写上
010	                    dataType: "json",
011	                    success: function(result) {
012	                        result =result.d;//返回d后面的json内容
013	                        $("#dictionary").append(result);
014	                    }
015	                });
016	            });
017	        });
018	        //有参数
019	        $(function() {
020	            $("#btn2").click(function() {
021	                $.ajax({
022	                    type: "POST",
023	                    contentType: "application/json;utf-8",
024	                    url: "WebService.asmx/GetWish",
025	                    data: "{value1:'万事如意',value2:'心想事成',value3:'财运滚滚',value4:2009}",
026	                    dataType: "json",
027	                    success: function(result) {
028	                        result =result.d;
029	                        $("#dictionary").html(result);
030	                    }
031	                });
032	            });
033	        });
034	        //返回集合
035	        $(function() {
036	            $("#btn3").click(function() {
037	                $.ajax({
038	                    type: "POST",
039	                    contentType: "application/json;utf-8",
040	                    url: "WebService.asmx/GetArray",
041	                    data: "{i:10}",
042	                    dataType: "json",
043	                    success: function(result) {
044	                        result =result.d;
045	                        $(result).each(function() {
046	                            $("#dictionary").append(this.toString() + " ");
047	                        });
048	                    }
049	                });
050	            });
051	        });
052	        //返回实体
053	        $(function() {
054	            $("#btn4").click(function() {
055	                $.ajax({
056	                    type: "POST",
057	                    contentType: "application/json;utf-8",
058	                    url: "WebService.asmx/GetClass",
059	                    data: "{}",
060	                    dataType: 'json',
061	                    success: function(result) {
062	                        result =result.d;
063	                        $("#dictionary").append(result.ID + " " + result.Value);
064	                    }
065	                });
066	            });
067	        });
068	        //返回DataSet(XML)
069	        $(document).ready(function() {
070	            $('#btn5').click(function() {
071	                $.ajax({
072	                    type: "POST",
073	                    url: "WebService.asmx/GetDataSet",
074	                    data: "{}",
075	                    dataType: 'xml', //返回的类型为XML ，和前面的Json，不一样了
076	                    success: function(result) {
077	                        //演示一下捕获
078	                        try {
079	                            $(result).find("Table1").each(function() {
080	                                $('#dictionary').append($(this).find("ID").text() + " " + $(this).find("Value").text());
081	                            });
082	                        }
083	                        catch (e) {
084	                            alert(e); return;
085	                        }
086	                    },
087	                    error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数  
088	                        if (status == 'error') {
089	                            alert(status);
090	                        }
091	                    }
092	                });
093	            });
094	        });
095	        //Ajax 为用户提供反馈，利用ajaxStart和ajaxStop 方法，演示ajax跟踪相关事件的回调，他们两个方法可以添加给jQuery对象在Ajax前后回调        //但对与Ajax的监控，本身是全局性的
096	        $(document).ready(function() {
097	            $('#loading').ajaxStart(function() {
098	                $(this).show();
099	            }).ajaxStop(function() {
100	                $(this).hide();
101	            });
102	        });
103	        // 鼠标移入移出效果，多个元素的时候，可以使用“，”隔开
104	        $(document).ready(function() {
105	            $('div.button').hover(function() {
106	                $(this).addClass('hover');
107	            }, function() {
108	                $(this).removeClass('hover');
109	            });
110	        });
111	    </script>