WebService Ajax调用

1.Html

<!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>
    <title></title>
    <script src="../js/jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        // 无参
        function BindCallHello() {
            $("#btnCallHello").click(function () {
                $.ajax({
                    type: "post", //访问WebService使用Post方式请求
                    url: "http://localhost:5606/Handler/UserService.asmx/HelloWebService", //调用Url(WebService的地址和方法名称组合---WsURL/方法名)
                    data: {}, //这里是要传递的参数，为Json格式{paraName:paraValue}
                    contentType: "Application/Json", // 发送信息至服务器时内容编码类型
                    beforeSend: function (XMLHttpRequest) {
                        XMLHttpRequest.setRequestHeader("Accept", "Application/Json"); // 接受的数据类型。(貌似不起作用，因为WebService的请求/返回 类型是相同的，由于请求的是Json，所以，返回的默认是Json)
                    },
                    success: function (data) {
                        var jsonValue = data;
                        alert(jsonValue.d); // 输出Json
                    },
                    complete: function (XMLHttpRequest, textStatus) {
                        var returnText = XMLHttpRequest.responseText;
                        $("#backData").html(returnText); // 输出服务器端返回数据
                    }
                });
            });
        }
        // 传递单个参数
        function BindCallBody() {
            $("#btnCallBody").click(function () {
                var name = $("#txtName").val();
                $.ajax({
                    type: "post", //访问WebService使用Post方式请求
                    url: "http://localhost:5606/Handler/UserService.asmx/HelloSomeBody", //调用Url(WebService的地址和方法名称组合---WsURL/方法名)

                    data: "{name:'" + name + "'}",  //这里是要传递的参数，为Json格式{paraName:paraValue}

                    contentType: "Application/Json", // 发送信息至服务器时内容编码类型

                    beforeSend: function (XMLHttpRequest) {
                        XMLHttpRequest.setRequestHeader("Accept", "Application/Json"); // 接受的数据类型。(貌似不起作用，因为WebService的请求/返回 类型是相同的，由于请求的是Json，所以，返回的默认是Json)
                    },
                    success: function (data) {
                        var jsonValue = data;

                        alert(jsonValue.d); // 输出Json

                    },
                    complete: function (XMLHttpRequest, textStatus) {
                        var returnText = XMLHttpRequest.responseText;
                        $("#backData").html(returnText); // 输出服务器端返回数据
                    }

                });

            });

        }
        //传递多个参数，返回类对象
        function BindGetSingleStudent() {
            $("#btnSinStuInfo").click(function () {
                var stuSid = $("#txtStuSid").val();
                var stuName = $("#txtStuName").val();
                var stuSex = $("#txtStuSex").val();
                var stuAge = $("#txtStuAge").val();
                $.ajax({
                    type: "post", //访问WebService使用Post方式请求
                    url: "http://localhost:5606/Handler/UserService.asmx/SetStudentInfo", //调用Url(WebService的地址和方法名称组合---WsURL/方法名)
                    data: "{name:'" + stuName + "',sex:'" + stuSex + "',age:'" + stuAge + "',sid:'" + stuSid + "'}",  //这里是要传递的参数，为Json格式{paraName:paraValue}
                    contentType: "Application/Json", // 发送信息至服务器时内容编码类型
                    beforeSend: function (XMLHttpRequest) {
                        XMLHttpRequest.setRequestHeader("Accept", "Application/Json"); // 接受的数据类型。(貌似不起作用，因为WebService的请求/返回 类型是相同的，由于请求的是Json，所以，返回的默认是Json)
                    },
                    success: function (data) {
                        var jsonValue = data;
                        alert(jsonValue.d.Sid); // 输出Json

                        $(data.d).each(function () {
                            alert(this['Age'] + this["Name"]);
                        });
                    },
                    complete: function (XMLHttpRequest, textStatus) {
                        var returnText = XMLHttpRequest.responseText;
                        $("#backData").html(returnText); // 输出服务器端返回数据
                    }
                });
            });
        }
        //返回List集合
        function BindGetMulStudents() {
            $("#btnMulStuInfos").click(function () {
                $.ajax({
                    type: "post", //访问WebService使用Post方式请求
                    url: "http://localhost:5606/Handler/UserService.asmx/GetMulStudentInfos", //调用Url(WebService的地址和方法名称组合---WsURL/方法名)
                    data: {},  //这里是要传递的参数，为Json格式{paraName:paraValue}
                    contentType: "Application/Json", // 发送信息至服务器时内容编码类型
                    beforeSend: function (XMLHttpRequest) {
                        XMLHttpRequest.setRequestHeader("Accept", "Application/Json"); // 接受的数据类型。(貌似不起作用，因为WebService的请求/返回 类型是相同的，由于请求的是Json，所以，返回的默认是Json)
                    },
                    success: function (data) {
                        var jsonValue = data;
                        alert(jsonValue.d[0].Sid); // 输出Json

                        $(data.d).each(function () {
                            alert(this['Age'] + this["Name"]);
                        });
                    },
                    complete: function (XMLHttpRequest, textStatus) {
                        var returnText = XMLHttpRequest.responseText;
                        $("#backData").html(returnText); // 输出服务器端返回数据
                    }
                });
            });
        }
        //返回DataSet
        function BindGetDataSet() {
            $.ajax({
                type: "POST",
                url: "http://localhost:5606/Handler/UserService.asmx/GetDataSet",
                data: "{}",
                dataType: 'xml', //返回的类型为XML ，和前面的Json，不一样了
                success: function (result) {
                    //演示一下捕获
                    try {
                        $(result).find("Table1").each(function () {
                            $('#backData').append($(this).find("ID").text() + " " + $(this).find("Value").text());
                        });
                    }
                    catch (e) {
                        alert(e);
                        return;
                    }
                },
                error: function (result, status) { //如果没有上面的捕获出错会执行这里的回调函数
                    if (status == 'error') {
                        alert(status);
                    }
                }
            });
        }
        //传递类对象、集合对象
        function BindSetClassListInfos() {
            $.ajax({
                type: "post",
                url: "http://localhost:5606/Handler/UserService.asmx/ComplexType",
                dataType: "json",
                contentType: "application/json",
                data: '{"hero": {"Name":"sxl","Age":25},"users":[{"Name":"zhang1","Age":22},{"Name":"wang1","Age":26},{"Name":"liu1","Age":25},{"Name":"luo1","Age":24}]}',
                success: function (data) { $("#web").text(data.d); }
            });
        }
    </script>
</head>
<body>
    <input type="button" id="btn5" value="返回DataSet" onclick="BindGetDataSet();" /><hr />
    <input id="btnWeb" type="button" value="传递类对象、集合对象" onclick="BindSetClassListInfos();" /><label
        id="web"></label>
    <div>
        <hr />
        <input id="btnCallHello" type="button" value="调用无参方法，返回字符串" onclick="BindCallHello();" />
        <hr />
        姓名：<input id="txtName" type="text" /><br />
        <input id="btnCallBody" type="button" value="调用有参方法，返回字符串" onclick="BindCallBody();" />
        <hr />
        学号：<input id="txtStuSid" type="text" /><br />
        姓名：<input id="txtStuName" type="text" /><br />
        性别：<input id="txtStuSex" type="text" /><br />
        年龄：<input id="txtStuAge" type="text" /><br />
        <input id="btnSinStuInfo" type="button" value="调用SetStudentInfo" onclick="BindGetSingleStudent();" /><br />
        <hr />
        <input id="btnMulStuInfos" type="button" value="调用GetMulStudentInfos" onclick="BindGetMulStudents();" />
        <hr />
    </div>
    <div id="backData">
    </div>
</body>
</html>

2.WebService

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using AjaxDemo.ClassFile;
using System.Data;

namespace AjaxDemo.Handler
{
    /// <summary>
    /// UserService 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
    [System.Web.Script.Services.ScriptService]
    public class UserService : System.Web.Services.WebService
    {
        /// <summary>
        /// 返会语句话
        /// </summary>
        [WebMethod]
        public string HelloWebService()
        {
            return "Hello WebService";
        }

        /// <summary>
        /// 返回一句问候，根据名称
        /// </summary>
        [WebMethod]
        public string HelloSomeBody(string name)
        {
            return "Hello " + name;
        }
        /// <summary>
        /// 设置学生实体，并返回这个实体
        /// </summary>
        [WebMethod]
        public Student SetStudentInfo(string name, string sex, int age, int sid)
        {
            Student stuInfo = new Student();
            stuInfo.Sid = sid;
            stuInfo.Name = name;
            stuInfo.Sex = sex;
            stuInfo.Age = age;
            return stuInfo;

        }

        /// <summary>
        /// 返回泛型数据
        /// </summary>
        /// <returns></returns>
        [WebMethod]
        public List<Student> GetMulStudentInfos()
        {
            List<Student> stuList = new List<Student>();
            for (int i = ; i < ; i++)
            {
                Student s = new Student();
                s.Sid = i + ;
                s.Name = "Tom" + s.Sid;
                s.Sex = "男";
                s.Age = i + ;
                stuList.Add(s);
            }
            return stuList;

        }
        [WebMethod]
        public string ComplexType(User hero, List<User> users)
        {
            return hero.Name + " has " + users.Count + "people !";
        }

        /// <summary>
        /// 返回XML
        /// </summary>
        /// <returns></returns>
        [WebMethod]
        public DataSet GetDataSet()
        {
            DataSet ds = new DataSet();
            DataTable dt = new DataTable();
            dt.Columns.Add("ID", Type.GetType("System.String"));
            dt.Columns.Add("Value", Type.GetType("System.String"));
            DataRow dr = dt.NewRow();
            dr["ID"] = "";
            dr["Value"] = "新年快乐";
            dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["ID"] = "";
            dr["Value"] = "万事如意";
            dt.Rows.Add(dr);
            ds.Tables.Add(dt);
            return ds;
        }
    }
}

3. 实体类

　　public class Student
    {
        public int Sid { get; set; }
        public string Name { get; set; }
        public string Sex { get; set; }
        public int Age { get; set; }
    }

　　public class User
    {
        public string Name { get; set; }
        public int Age { get; set; }
        public int ID { get; set; }
    }