通过ajax实现参数的动态过滤

在润乾的参数表单中支持参数的动态过滤，即选择省份后，再选择城市时，城市所在单元格会动态过滤出当前省内的城市，供用户选择，提高客户的参数选择速度。润乾实现方式是取出所有数据，然后通过js来实现，这样当数据量比较大时，性能是一个不得不考虑的问题，同过ajax的异步处理方式能很好解决这一问题。

实现方法：

1、通过设计器制作参数模板文件：

B2单元格设置为润乾的下拉数据集，选择地区字段，C2单元格数据类型设置成html，里边输入

<SELECT width=’500′ name=’skill’ id=’skill’><OPTION value=’0′></OPTION>                         </SELECT>

要想实现B2单元格数据变后调用相应处理方法，必须在增加一个对B2单元格的监听，在A5单元格的自动计算中输入：Change_Select(B2)，及当点击B2时，调用该js函数进行相关处理。

2、jsp页面的代码

在jsp中增加该js函数，并实现相关功能

function Change_Select(arg1){                  

            var url=”select?id=”+arg1;

              if(window.XMLHttpRequest)

            {  req=new XMLHttpRequest();

            }else if(window.ActiveXObject)

            {

  req=new ActiveXObject(“Microsoft.XMLHTTP”);

            }           

            if(req)

            {

                req.open(“GET”,url,true);

                req.onreadystatechange=callback;

                req.send(null);

            }

                   }

页面得到相关值后，将值传给servlet后台计算，然后取出值放到页面端展现。

try

        {

            con = ctx.getConnectionFactory(ctx.getDefDataSourceName()).getConnection();

            stmt = con.createStatement();

        }

        catch(Exception e)

        {

            e.printStackTrace();

        }

        String targetId = request.getParameter(“id”).toString();

        String sql = (new StringBuilder(“select distinct 城市 from 客户 where 地区=’”)).append(targetId).append(“‘”).toString();

        try

        {

            rs = stmt.executeQuery(sql);

        }

        catch(SQLException e)

        {

            e.printStackTrace();

        }

将编译后的servlet放到WEB-INF/classes目录下，并在web.xml中注册

       <servlet>

    <servlet-name>SelectServlet</servlet-name>

    <servlet-class>com.SelectServlet</servlet-class>

  </servlet>

 

  <servlet-mapping>

    <servlet-name>SelectServlet</servlet-name>

    <url-pattern>/select</url-pattern>

  </servlet-mapping>

这样就能在页面上选择地区后，城市所在单元格能按照所选地区列出相应城市供用户选择，由于用到的是异步处理方式，所以性能上会大大提升。