Jqeury ajax 调用C#的后台程序

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JQueryTest.aspx.cs" Inherits="自定义滚动条_JQueryTest" %>

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  
<html xmlns="http://www.w3.org/1999/xhtml" >  
<head id="Head1" runat="server">  
    <title></title>  
    <script src="jquery-1.8.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">  
        $(function() {  
            $("#btnOK").click(function() {  
                $.ajax({  
                    type: "Post",  
                    url: "JQueryTest.aspx/SayHello",  
                    data: "{}",  
                    contentType: "application/json; charset=utf-8",  
                    dataType: "json",  
                    success: function(data) {  
                        alert(data.d);  
                    },  
                    error: function(err) {  
                        alert(err);  
                    }  
                });  
                return false;  
            });  
            $("#btnOK0").click(function() {  
                $.ajax({  
                    type: "Post",  
                    url: "JQueryTest.aspx/GetStr",  
                    data: "{'str':'我是','str2':'XXX'}",  
                    contentType: "application/json; charset=utf-8",  
                    dataType: "json",  
                    success: function(data) {  
                        alert(data.d);  
                    },  
                    error: function(err) {  
                        alert(err);  
                    }  
                });  
                return false;  
            });  
            $("#btnOK1").click(function() {  
                $.ajax({  
                    type: "Post",  
                    url: "JQueryTest.aspx/GetArray",  
                    data: "{}",  
                    contentType: "application/json; chartset=utf-8",  
                    dataType: "json",  
                    success: function(data) {  
                        $("#list").html("");  
                        $(data.d).each(function() {  
                            $("#list").append("<li>" + this + "</li>");  
                        });  
                        alert(data.d);  
                    },  
                    error: function(err) {  
                        alert(err);  
                    }  
                });  
                return false;  
            });  
            $("#btnOK2").click(function() {  
                $.ajax({  
                    type: "Post",  
                    url: "JQueryTest.aspx/GetHash",  
                    data: "{'key':'haha','value':'哈哈！'}",  
                    contentType: "application/json: charset=utf-8",  
                    dataType: "json",  
                    success: function(data) {  
                        alert("key:haha==>" + data.d["haha"] + "/n key:www==>" + data.d["www"]);  
                    },  
                    error: function(err) {  
                        alert(err + "err");  
                    }  
                });  
                return false;  
            });  
            $("#btnOK3").click(function() {  
                $.ajax({  
                    url: "XMLTest.xml",  
                    dataType: 'xml',  
                    success: function(xml) {  
                        $("#list1").html("");  
                        $(xml).find("data>item").each(function() {  
                            $("#list1").append("<li>id:" + $(this).find("id").text() + "</li>");  
                            $("#list1").append("<li>name:" + $(this).find("name").text() + "</li>");  
                        })  
                    },  
                    error: function(result, status) {  
                        alert(status);  
                    }  
                });  
                return false;  
            });  
        });   
      
 </script>  
</head>  
<body>  
    <form id="form1" runat="server">  
    <div>  
        <input id="btnOK" type="button" value="button" />  
        <input id="btnOK0" type="button" value="button" />  
        <input id="btnOK1" type="button" value="button" />  
        <input id="btnOK2" type="button" value="button" />  
        <input id="btnOK3" type="button" value="button" />  
        <ul id="list"></ul>    
        <ul id="list1"></ul>   
    </div>  
    </form>  
</body>  
</html>

 

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.UI;  
using System.Web.UI.WebControls;  
using System.Web.Script.Services;  
using System.Web.Services;  
using System.Collections;  
  
 
public partial class 自定义滚动条_JQueryTest : System.Web.UI.Page
    {  
        protected void Page_Load(object sender, EventArgs e)  
        {  
  
        }  
  
        [WebMethod]  
        public static string SayHello()  
        {  
            return "Hello Ajax";  
        }  
  
        [WebMethod]  
        public static string GetStr(string str, string str2)  
        {  
            return str + str2;  
        }  
  
        [WebMethod]  
        public static List<string> GetArray()  
        {  
            List<string> li = new List<string>();  
            for (int i = 0; i < 10; i++)  
            {  
                li.Add(i + "");  
            }  
            return li;  
        }  
  
        [WebMethod]  
        public static Hashtable GetHash(string key, string value)  
        {  
            Hashtable hs = new Hashtable();  
            hs.Add("www", "yahooo");  
            hs.Add(key, value);  
            return hs;  
        }  
    }