JQuery Ajax项目开发总结

一、功能概述：其实就是很简单的一个两级的下拉列表联动。

 

二、开发详解：

 

1.Information_Create.aspx页面中使用JQuery Ajax实现下拉列表两级联动。在这个页面中是这样实现的：

 

第一步：引入jquery包，代码：<script src="../js/jquery/jquery.js" type="text/javascript"></script>

 

第二步：加上三个控件（两个用于联动的dropdownlist和一个hiddenField用于保存选择的值），代码：

<td>
        所属频道/栏目：
</td>
<td>
       <asp:DropDownList ID="ddlChannel" runat="server"></asp:DropDownList>

       &nbsp;

       <asp:DropDownList ID="ddlSection" runat="server" οnchange="GetType()">
            <asp:ListItem Value="">请选择</asp:ListItem>
       </asp:DropDownList>
                       
      <asp:HiddenField ID="hidType" runat="server" />

</td>

 

第三步：编写jquery js代码，代码：

<script type="text/javascript">
    $(document).ready(function() {
        $('#ddlChannel').change(function () //注册ddlChannel的change事件
        {
            $.get( //调用jquery ajax中的get
                '../../plug/AjaxRequest.aspx',//第一个参数表示需要请求的页面
               {
                       type:$("#ddlChannel").val(), //第二个参数表示需要给请求页面传送的参数。在请求页面中可以使用Request["type"]和Request["state"]获取。
                       state:1
               },
               function(data) //第三个表示一个得到数据的函数
           {
           $("#ddlSection").empty(); //将ddlSection清空
           $(data).appendTo("#ddlSection") //使用appendTo数据追加到ddlSection控件中
      }
     );
  });
 });
 
 //这是一个当第二个dropdownlist在onchange的时候将值保存到隐藏控件中
 function GetType()
 {
  $("#hidType").val($("#ddlSection").val());
 }
</script>

 

2.AjaxRequest.aspx页面是一个Ajax请求页面，为了在以后使用ajax的时候都使用这个请求页面，只是通过传递不同的state参数进行业务匹配，代码：

//得到类型,这样在以后的多个页面中要使用不通业务的时候可以传递不同的state，由switch进行匹配
state = int.Parse(Request["state"].ToString());

switch (state)
{
 case 1:
 //设置数据
 break;
 case 2:
 //设置数据
 .
 .
 .
}

注：这个只是我在项目中多jquery ajax的一个使用，有更多的介绍可以查看我的下载中的jquery api 地址：

http://download.csdn.net/source/2423908