.net编写webService与使用jquery调用

.net编写webService,不像j2ee那样的复杂需要框架(CXF、xfire等)和自动化构建工具(Ant、Maven等)的支持。下面,编写一个简单的示例来做一个演示;

先创建MyTest.asmx文件:

-------------------------------------------------------------------------------------------------------------------------------------------

.net编写webService与使用jquery调用_第1张图片

----------------------------------------------------------------------------------------------------------------------------------------

然后在这个文件里面编写几个方法:

View Code
<%@ WebService Language="C#" Class="MyTest" %>

using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;

using System.Collections.Generic;
using System.Linq;
using System.Web.UI;
using System.Web.UI.WebControls;
using BIWeb.CommonTools;
using BIWeb.EntityLayer;
using System.Data;
using System.Text.RegularExpressions;
using BIWeb.ControlLayers;
using System.Collections;
using System.Web.Script.Serialization;
using System.Web.Script.Services;
using Mdx_Layer;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]                             //令WebService成功传入Json参数,并以Json形式返回结果
//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。 
// [System.Web.Script.Services.ScriptService]
public class MyTest  : System.Web.Services.WebService {
/// <summary>
        /// 无任何参数
        /// </summary>
        /// <returns></returns>
        [WebMethod]
        public string HelloWorld()
        {
            return "HelloWorld";
        }

        /// <summary>
        /// 传入参数
        /// </summary>
        /// <param name="name"></param>
        /// <returns></returns>
        [WebMethod]
        public string HelloWorld2(string name) 
        {
            return string.Format("HelloWorld2 {0}", name);
        }

        /// <summary>
        /// 返回泛型列表
        /// </summary>
        /// <param name="i"></param>
        /// <returns></returns>
        [WebMethod]
        public List<int> GetArray(int i) 
        {
            List<int> list = new List<int>();

            while (i >= 0)
            {
                list.Add(i--);
            }

            return list;
        }
 
}

再编写jquery调用端:

View Code
<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
        <form id="form1" runat="server">
            <div>
                <input type="button" id="btn1" value="调用无参数方法" />
            </div>
            <div>
                <input type="button" id="btn2" value="传入1个参数" />
            </div>
            <div>
                <input type="button" id="btn3" value="返回泛型列表" />
            </div>
        </form>
    </body>
<script type="text/javascript" src="../Js/jquery-ui-1.8.20.custom/js/jquery-1.7.2.min.js"></script> 
<script type="text/javascript">
    $(function () {
        //调用无参数方法
        $("#btn1").click(function () {
            $.ajax({
                type: "POST",
                contentType: "application/json",
                url: "../WebService/MyTest.asmx/HelloWorld",
                data: "{}",
                dataType: 'json',
                success: function (result) {
                    alert(result.d);
                }
            });
        });

        //传入1个参数
        $("#btn2").click(function () {
            $.ajax({
                type: "POST",
                contentType: "application/json",
                url: "../WebService/MyTest.asmx/HelloWorld2",
                data: "{name:'zcw'}",
                dataType: 'json',
                success: function (result) {
                    alert(result.d);
                }
            });
        });

        //返回泛型列表
        $("#btn3").click(function () {
            $.ajax({
                type: "POST",
                contentType: "application/json",
                url: "../WebService/MyTest.asmx/GetArray",
                data: "{i:50}",
                dataType: 'json',
                success: function (result) {
                    alert(result.d.join(" | "));
                }
            });
        });
    });
    </script>
</html>

其实.net提供了一个供后端人员测试webService的方式:就是直接跑这个.asmx文件;

跑下来就是这样:

---------------------------------------------------------------------------------------------------------------------------------------------------------

.net编写webService与使用jquery调用_第2张图片

------------------------------------------------------------------------------------------------------------------------------------------------------------

然后你就可以手动输入参数的去测试你的代码了。

不过有几点需要提出:asmx文件必须带有这样的声明,否则js无法调用:

[ScriptService]                             //令WebService成功传入Json参数,并以Json形式返回结果

最好,我想提的一点就是诸如webService或者REST这样的技术其实原理上是比较复杂的,要学习这样的技术,最好能够摆脱这样的可视化操作,逐步的写schema,完成相关的webService的编写才能更加好的去利用这些技术。

 

 

 

 

 

 

 

 

 

你可能感兴趣的:(webservice)