jquery Ajax调用asmx和ashx代码示例三级联动

html&js

<%@ Page Language="C#" MasterPageFile="~/SaleApp/MasterPage.Master" AutoEventWireup="true" CodeBehind="NewSelBreed.aspx.cs" Inherits="WebApp.SaleApp.BreedManage.NewSelBreed" Title="药品第二种搜索方式" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeaderPlaceHolder1" runat="server">



</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<!--操作区-->

    <table width="100%" border="0" cellspacing="0" cellpadding="0">

        <tr>

            <td height="26">

                当前位置：<a href="../Default.aspx">系统首页</a> > 品种管理 > 选择库存药品</td>

            <td align="right">

                <a href="#"></a>

            </td>

        </tr>

    </table>

     <table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#a7c4db" class="p3">

                <tr class="color3">

                    <td height="40" background="../images/ss_bg.gif" align="center" id="SearchPanel">

                        名称

                        <input name="txtProcuctName" id="txtProductName" type="text" class="formbk8" 

                            runat="server" /> 

                        主治

                        <input name="txtMajorFunction" id="txtMajorFunction"   type="text" class="formbk8" 

                            runat="server" /> 

                        <select name="ddlFirstCategory" id="ddlFirstCategory"   runat="server">

                          <option value="-1" selected="selected">大类全部</option>

                          <option value="中药">中药</option>

                          <option value="化学药品">化学药品</option>

                          <option value="非药品">非药品</option>

                        </select>

                         

                        <select name="ddlFunctionSys" id="ddlFunctionSys" runat="server" >

                          <option value="-1" selected="selected">治疗系统</option>

                         

                        </select>

                         

                        <select id="ddlSecondCategory" name="ddlSecondCategory" runat="server" >

                          <option value="-1" selected="selected">亚类全部</option>

                        </select> 

                        <select id="ddlDosageform" name="ddlDosageform" runat="server" >

                          <option value="-1" selected="selected">剂型全部</option>

                        </select><br />

                        OTC

                        <select id="ddlOTC" name="ddlOTC" runat="server" >

                          <option value="-1" selected="selected">全部</option>

                          <option value="0">否</option>

                           <option value="甲">甲</option>

                            <option value="乙">乙</option>

                        </select>

                          

                         独家品种

                        <select id="ddlExclusiveProduct" name="ddlExclusiveProduct" runat="server" >

                          <option value="-1" selected="selected">全部</option>

                          <option value="1">是</option>

                          <option value="0">否</option>

                        </select>  

                         医保药物

                        <select id="ddlInsuranceProduct" name="ddlInsuranceProduct" runat="server" >

                          <option value="-1" selected="selected">全部</option>

                          <option value="1">是</option>

                          <option value="0">否</option>

                        </select>  

                         中药保护

                        <select id="ddlProtectProduct" name="ddlProtectProduct" runat="server" >

                          <option value="-1" selected="selected">全部</option>

                          <option value="1">是</option>

                          <option value="0">否</option>

                        </select>  

                         基本药物

                        <select id="ddlPrimaryProduct" name="ddlPrimaryProduct" runat="server" >

                          <option value="-1" selected="selected">全部</option>

                          <option value="1">是</option>

                          <option value="0">否</option>

                        </select>  

                                               <input name="btnSearch" type="button" class="cxbtn" value="查询" onclick="Search()" style="cursor: hand" />

                             



                    </td>

                </tr>

            </table>

    <table width="820" border="0" cellspacing="0" cellpadding="0">

        <tr>

            <td style="height: 1px">

            </td>

        </tr>

    </table>

    <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#b4cdf0"

        class="p3">

        <tr class="color3">

            <td align="center" bgcolor="#e8eefa" style="width: 87px; height: 22px">

                产品名称</td>

            <td align="center" bgcolor="#e8eefa" style="width: 91px; height: 22px">

                剂型</td>

            <td align="center" bgcolor="#e8eefa" style="height: 22px">

                产品大类</td>

            <td align="center" bgcolor="#e8eefa" style="height: 22px">

                治疗系统</td>

            <td align="center" bgcolor="#e8eefa" style="height: 22px">

                亚类</td>

            <td align="center" bgcolor="#e8eefa" style="height: 22px">

                独家产品</td>           

            <td align="center" bgcolor="#e8eefa" style="height: 22px">

                医保药品</td>            

            <td align="center" bgcolor="#e8eefa" style="height: 22px">

                基本药物</td>

            <td align="center" bgcolor="#e8eefa" style="height: 22px">

                OTC</td>

            <td align="center" bgcolor="#e8eefa" style="height: 22px">

                中药保护品种</td>

            <td align="center" bgcolor="#e8eefa" style="height:22px">

                查看</td>            

        </tr>

        <asp:Repeater ID="repData" runat="server">

            <ItemTemplate>

                <tr class="p5">                    

                    <td height="20" align="left" bgcolor="white">

                        <%#Eval("ProductName")%>

                    </td>

                    <td height="20" align="left" bgcolor="white">

                        <%#Eval("Dosageform")%>

                    </td>

                    <td height="20" align="center" bgcolor="white">

                        <%#Eval("FirstCategory")%>

                    </td>

                    <td height="20" align="center" bgcolor="white">

                        <%#Eval("FunctionSys")%>

                    </td>

                    <td height="20" align="center" bgcolor="white">

                        <%#Eval("SecondCategory")%>

                    </td>

                    <td height="20" align="center" bgcolor="white">

                        <%#((Eval("ExclusiveProduct").ToString()=="1")?"是":"否")%>

                    </td>

                    

                    <td height="20" align="center" bgcolor="white">

                        <%#((Eval("InsuranceProduct").ToString() == "1")?"是":"否")%>

                    </td>

                    

                    <td height="20" align="center" bgcolor="white">

                        <%#((Eval("PrimaryProduct").ToString() == "1")?"是":"否")%>

                    </td>

                    <td height="20" align="center" bgcolor="white">

                        <%#((Eval("OTC").ToString() == "0") ? "否" : Eval("OTC").ToString())%>

                    </td>                    

                    <td height="20" align="center" bgcolor="white">

                        <%#((Eval("ProtectProduct").ToString() == "1")?"是":"否")%>

                    </td>               

                    <td height="20" align="center" bgcolor="white" title="查看该药品的不同批号类型">

                        <span class="green" style="cursor: hand">

                           <input type="button" class="cxbtn" onclick="<%#Eval("LookScript") %>" value="查看" />

                        </span>

                    </td>

                </tr>

            </ItemTemplate>

            <AlternatingItemTemplate>

                <tr class="p5">

                    <td height="20" align="left" bgcolor="#f9fbfe">

                        <%#Eval("ProductName")%>

                    </td>

                    <td height="20" align="left" bgcolor="#f9fbfe">

                        <%#Eval("Dosageform")%>

                    </td>

                    <td height="20" align="center" bgcolor="#f9fbfe">

                        <%#Eval("FirstCategory")%>

                    </td>

                    <td height="20" align="center" bgcolor="#f9fbfe">

                        <%#Eval("FunctionSys")%>

                    </td>

                    <td height="20" align="center" bgcolor="#f9fbfe">

                        <%#Eval("SecondCategory")%>

                    </td>

                    <td height="20" align="center" bgcolor="#f9fbfe">

                        <%#((Eval("ExclusiveProduct").ToString() == "1")?"是":"否")%>

                    </td>                   

                    <td height="20" align="center" bgcolor="#f9fbfe">

                        <%#((Eval("InsuranceProduct").ToString() == "1")?"是":"否")%>

                    </td>                    

                    <td height="20" align="center" bgcolor="#f9fbfe">

                        <%#((Eval("PrimaryProduct").ToString() == "1")?"是":"否")%>

                    </td>

                    <td height="20" align="center" bgcolor="#f9fbfe">

                         <%#((Eval("OTC").ToString() == "0") ? "否" : Eval("OTC").ToString())%>

                    </td>

                     <td height="20" align="center" bgcolor="#f9fbfe">

                        <%#((Eval("ProtectProduct").ToString() == "1")?"是":"否") %>

                    </td>

                    <td height="20" align="center" bgcolor="#f9fbfe"  title="查看该药品的不同批号类型">

                        <span class="green" style="cursor: hand">

                            <input type="button" class="cxbtn" onclick="<%#Eval("LookScript") %>" value="查看" />

                        </span>

                    </td>

                   

                </tr>

            </AlternatingItemTemplate>

        </asp:Repeater>

    </table>

    <table width="100%" height="47" border="0" cellpadding="0" cellspacing="0">

          <tr>

            <td width="3%" align="center"> </td>

            <td width="97%" align="left">

                <webdiyer:AspNetPager ID="AspNetPager1" runat="server" HorizontalAlign="Left" CustomInfoHTML='目前共有<font color="red">%RecordCount%</font>条记录                 当前 <font color="red">%CurrentPageIndex%</font> / %PageCount%页'

                    FirstPageText="首页" LastPageText="尾页" NextPageText="下一页" PageIndexBoxType="TextBox"

                    PrevPageText="上一页" ShowCustomInfoSection="Left" ShowPageIndex="False" ShowPageIndexBox="Always"

                    TextBeforePageIndexBox="跳转到： " OnPageChanged="AspNetPager1_PageChanged" PageSize="10" PageIndexBoxClass="formbk8" SubmitButtonClass="cxbtn"

                    NavigationToolTipTextFormatString="{0}" CssClass="a2" AlwaysShow="True" UrlPaging="true"  SubmitButtonText="Go">

                </webdiyer:AspNetPager>

            </td>

          </tr>

        </table>

    <script type="text/javascript" language="javascript" >    

     var Go = function()

     {

        if(window.event.keyCode == '13')

            Search();

     }

     var Search = function()

     {

        if($.trim($('#<%=txtProductName.ClientID %>').val()) == "" 

        && $.trim($('#<%=txtMajorFunction.ClientID%>').val()) == "" 

        && $('#<%=ddlFirstCategory.ClientID %>').val()== "-1")

        {

            alert('请至少输入一个查询条件\n1.药品名称\n2.主治功能\n3.大类');

            return false;

        }

        if($.trim($('#<%=txtProductName.ClientID %>').val()).length < 2 

        && $.trim($('#<%=txtMajorFunction.ClientID %>').val()).length < 2 

        && $('#<%=ddlFirstCategory.ClientID%>').val() == "-1")

        {

            alert("请至少输入2个字符进行查询");

            if($('#<%=txtProductName.ClientID %>').val().length < 2)

            {

                $("#<%=txtProductName.ClientID %>").focus();

                return false;

            }

            if($("#<%=txtMajorFunction.ClientID %>").val().length < 2)

            {

                $("#<%=txtMajorFunction.ClientID %>").focus();

                return false;

            }

        }

        else

        {

            var url = "../BreedManage/NewSelBreed.aspx?productname="+$.trim($('#<%=txtProductName.ClientID %>').val())

            +"&majorfunction=" + $.trim($('#<%=txtMajorFunction.ClientID %>').val())

            +"&firstcategory=" + $('#<%= ddlFirstCategory.ClientID %>').val()

            +"&functionsys=" + $('#<%= ddlFunctionSys.ClientID %>').val()

            +"&secondcategory=" +$('#<%= ddlSecondCategory.ClientID %>').val()

            +"&dosageform=" + $('#<%= ddlDosageform.ClientID %>').val()

            +"&otc="+ $('#<%= ddlOTC.ClientID %>').val()

            +"&exclusiveproduct=" +$('#<%=ddlExclusiveProduct.ClientID%>').val()

            +"&insuranceproduct=" + $('#<%=ddlInsuranceProduct.ClientID%>').val()

            +"&protectproduct=" + $('#<%=ddlProtectProduct.ClientID%>').val()

            +"&primaryproduct=" + $('#<%=ddlPrimaryProduct.ClientID%>').val()

            +"&page="+"<%=page %>";

            location.href=url;

        }

     }

     

     var LookScript = function(productname,majorfunction,firstcategory,functionsys,secondcategory,dosageform,otc,exclusiveproduct,insuranceproduct,protectproduct,primaryproduct,drugname,page)

     {

        var url = "../BreedManage/SelBreed.aspx?productname="+productname

            +"&majorfunction=" + majorfunction

            +"&firstcategory=" + firstcategory

            +"&functionsys=" + functionsys

            +"&secondcategory=" +secondcategory

            +"&dosageform=" + dosageform

            +"&otc="+ otc

            +"&exclusiveproduct=" +exclusiveproduct

            +"&insuranceproduct=" + insuranceproduct

            +"&protectproduct=" + protectproduct

            +"&primaryproduct=" + primaryproduct

            +"&drugname="+drugname

            +"&page="+page;

            location.href=url;

     }

     $(function(){

        $("#SearchPanel input[type='text']").bind('keydown',function(){

            Go();

        });

        $("#SearchPanel select").keydown(function(){

            Go();

        });

        $("#SearchPanel select:lt(2)").change(function(){

            if($(this).val() != "-1"){

                //getXmlJson($(this).val(),$(this).next("select"));//通过调用WebService

                GetXmlJsonToAshx($(this).val(),$(this).next("select"));//通过调用一般处理程序

            }

            else

            {

                if(this.id == '<%=ddlFirstCategory.ClientID %>'){

                  $(this).next("select").val('-1').next("select").val('-1');

                  $(this).next("select").next("select").get(0).options.length = 1;

               }else{

                  $(this).next("select").val('-1');

               }

               $(this).next("select").get(0).options.length = 1;               

            }

        });

        if("<%=FirstCategory %>" != "")

        {

            $("#<%=ddlFirstCategory.ClientID %>").change();

        }

        

     });

     

     //Jquery ajax调用WebService

     var getXmlJson = function(mess,selectName){

           $.ajax({

               type: "post",

               contentType:"application/json",

               url: "../TestServices.asmx/GetDrugsCategory",

               data: "{xmlname:'"+mess+"'}",

               datatype:"json", 

               success: function(data) { 

                   var options = selectName.get(0).options;

                   options.length = 1;

                   if(selectName.get(0).id == '<%=ddlFunctionSys.ClientID %>')

                      selectName.next("select").get(0).options.length = 1;

                   var json = eval(data);

                   if(!json)

                      return;  

                   $.each(json,function(i,n){

                      options.add(new Option(n.name,n.name));

                   });

                   if($('#<%=ddlFunctionSys.ClientID %>').val() == "-1" && "<%=FunctionSys %>" != ""){                  

                      $('#<%=ddlFunctionSys.ClientID %>').val('<%=FunctionSys %>'); 

                      $('#<%=ddlFunctionSys.ClientID %>').change(); 

                   }

                   if($('#<%=ddlSecondCategory.ClientID %>').val() == "-1" && "<%=SecondCategory %>" != ""){

                       $('#<%=ddlSecondCategory.ClientID %>').val('<%=SecondCategory %>'); 

                       $('#<%=ddlSecondCategory.ClientID %>').change(); 

                   }

              },

              error: function(x, e) {

                   alert("失败:"+x.responseText);

              }  

            });

        }

     //Jquery ajax调用ashx

    var GetXmlJsonToAshx = function(mess,selectName)

    {

        $.ajax({

            type:"post",

            url: "../HandlerDrugsCategory.ashx?action=test",

            contentType:"application/x-www-form-urlencoded;charset=UTF-8",     

            data: "xmlname="+mess,//提交表单，相当于HandlerDrugsCategory.ashx?xmlname=XXX

            //json格式接收数据

            datatype:"json",             

            success:function(data) {

                   // 请求成功后回调函数 参数：服务器返回数据,数据格式.

                   var options = selectName.get(0).options;

                   options.length = 1;

                   if(selectName.get(0).id == '<%=ddlFunctionSys.ClientID %>')

                      selectName.next("select").get(0).options.length = 1;

                   var json = eval(data);

                   if(!json)

                      return;  

                   $.each(json,function(i,n){

                      options.add(new Option(n.name,n.name));

                   });

                   if($('#<%=ddlFunctionSys.ClientID %>').val() == "-1" && "<%=FunctionSys %>" != ""){                  

                      $('#<%=ddlFunctionSys.ClientID %>').val('<%=FunctionSys %>'); 

                      $('#<%=ddlFunctionSys.ClientID %>').change(); 

                   }

                   if($('#<%=ddlSecondCategory.ClientID %>').val() == "-1" && "<%=SecondCategory %>" != ""){

                       $('#<%=ddlSecondCategory.ClientID %>').val('<%=SecondCategory %>'); 

                       $('#<%=ddlSecondCategory.ClientID %>').change(); 

                   }

              },

              error: function(x, e) {

                   alert("失败:"+x.responseText);

              }  

        });

    }

</script>

</asp:Content>

ashx：

using System;

using System.Data;

using System.Web;

using System.Collections;

using System.Web.Services;

using System.Web.Services.Protocols;

using System.Xml;

using System.Web.SessionState;

using System.Text;



namespace WebApp.SaleApp

{

    /// <summary>

    /// $codebehindclassname$ 的摘要说明

    /// </summary>

    [WebService(Namespace = "http://tempuri.org/")]

    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

    public class HandlerDrugsCategory : IHttpHandler, IRequiresSessionState 

    {



        public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "application/json";

            //context.Response.Charset = "gb2312";//utf-8

            string action = context.Request.Params["action"].ToString();

            if (action == "test")

            {

                //string strJson = GetDrugsCategory(HttpContext.Current.Server.UrlDecode(context.Request.Params["xmlname"].ToString()));

                string strJson = GetDrugsCategory(HttpUtility.UrlDecode(context.Request.Params["xmlname"].ToString(), Encoding.GetEncoding("utf-8")));

                context.Response.Write(strJson);

                context.Response.End();

            }

        }

        /// <summary>

        /// 业务员查询药品分类

        /// </summary>

        /// <param name="xmlname">查询节点名称</param>

        /// <returns></returns>

        public string GetDrugsCategory(string xmlname)

        {

            XmlDocument xd = new XmlDocument();

            xd.Load(HttpContext.Current.Server.MapPath("./XmlData/YwHyDrugCategory.xml"));

            XmlNode xnode = xd.DocumentElement;

            XmlNode node = null;

            GetXMLNode(xnode, ref node,xmlname);

            return GetXmlJson(node);

        }



        /// <summary>

        /// 将XML解析成数据格式为Json的数据供JS使用

        /// 返回json数据

        /// </summary>

        /// <param name="node">XML节点</param>

        /// <returns></returns>

        private string GetXmlJson(XmlNode node)

        {

            try

            {

                System.Text.StringBuilder sb = new System.Text.StringBuilder();

                if (node != null)

                {

                    sb.Append("[");

                    foreach (XmlNode xnode in node.ChildNodes)

                    {

                        sb.Append("{\"name\":\"" + xnode.Attributes["name"].Value + "\"},");

                    }

                    sb.Remove(sb.Length - 1, 1);

                    sb.Append("]");

                }



                return sb.ToString();

            }

            catch (Exception ex)

            {

                throw new Exception(ex.Message);

            }



        }



        /// <summary>

        /// 递归调用解析XML

        /// </summary>

        /// <param name="xnode">XML根节点</param>

        /// <param name="node">返回XML节点</param>

        /// <param name="message">查询XML节点名称</param>

        private void GetXMLNode(XmlNode xnode, ref XmlNode node, string message)

        {

            try

            {

                if (xnode.HasChildNodes)

                {

                    foreach (XmlNode var in xnode.ChildNodes)

                    {

                        string name = var.Attributes["name"].Value;

                        if (name == message)

                        {

                            node = var;

                            return;

                        }

                        GetXMLNode(var, ref node, message);

                    }

                }

            }

            catch (Exception ex)

            {

                throw new Exception(ex.Message);

            }

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

}

asmx：

using System;

using System.Data;

using System.Web;

using System.Collections;

using System.Web.Services;

using System.Web.Services.Protocols;

using System.ComponentModel;



using System.Web.Script.Services;

using System.Xml;



namespace WebApp.SaleApp

{

    /// <summary>

    /// TestServices 的摘要说明

    /// 业务员第二种查询方式中药片分类级联下拉三级列表

    /// CnHney.wl

    /// 2011-03-28

    /// </summary>

    [WebService(Namespace = "http://tempuri.org/")]

    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

    [ToolboxItem(false)]

    [ScriptService]

    public class TestServices : System.Web.Services.WebService

    {



        [WebMethod]

        public string HelloWorld()

        {

            return "Hello World";

        }



        /// <summary>

        /// 业务员查询药品分类

        /// </summary>

        /// <param name="xmlname">查询节点名称</param>

        /// <returns></returns>

        [WebMethod(EnableSession=true)]

        [ScriptMethod]

        public string GetDrugsCategory(string xmlname)

        {

            XmlDocument xd = new XmlDocument();

            xd.Load(Server.MapPath("./XmlData/YwHyDrugCategory.xml"));

            XmlNode xnode = xd.DocumentElement;

            XmlNode node = null;

            GetXMLNode(xnode, ref node, xmlname);

            return GetXmlJson(node);

        }



        /// <summary>

        /// 将XML解析成数据格式为Json的数据供JS使用

        /// 返回json数据

        /// </summary>

        /// <param name="node">XML节点</param>

        /// <returns></returns>

        private string GetXmlJson(XmlNode node)

        {

            try 

            {

                System.Text.StringBuilder sb = new System.Text.StringBuilder();

                if (node != null)

                {

                    sb.Append("[");

                    foreach (XmlNode xnode in node.ChildNodes)

                    {

                        sb.Append("{'name':'"+xnode.Attributes["name"].Value +"'},");

                    }

                    sb.Remove(sb.Length - 1, 1);

                    sb.Append("]");

                }



                return sb.ToString();

            }

            catch (Exception ex)

            {

                throw new Exception(ex.Message);

            }



        }



        /// <summary>

        /// 递归调用解析XML

        /// </summary>

        /// <param name="xnode">XML根节点</param>

        /// <param name="node">返回XML节点</param>

        /// <param name="message">查询XML节点名称</param>

        private void GetXMLNode(XmlNode xnode, ref XmlNode node, string message)

        {

            try

            {

                if(xnode.HasChildNodes)

                {

                    foreach (XmlNode var in xnode.ChildNodes)

                    {

                        string name = var.Attributes["name"].Value;

                        if (name == message)

                        {

                            node = var;

                            return;

                        }

                        GetXMLNode(var, ref node, message);

                    }

                }

            }

            catch (Exception ex)

            {

                throw new Exception(ex.Message);

            }

        }

    }

}

仅供参考，欢迎拍砖！