利用ajax实现二级联动下拉框

下拉框二级联动，用ajax来实现是已经非常成熟的技术了。但对于我这个java菜鸟来说，真的是费了九牛二虎之力，各种百度，各种测试。终于得以实现。代码相对于网上的容易理解些。现把代码和我在编写的过程中遇到的问题贴出来，对自己也是一个总结，同时也希望能帮助到跟我一样的菜鸟。

如上图，实现的是不同的公司，有不同的部门。

前台jsp代码：

<tr><td width="16%" bgcolor="#dfdfdf">所属单位/公司 : <td width="16%"><html:select property="company_name" onchange="showCompanyName(this.value)">  <option value=""></option>           <html:options collection="list_company" property="company_id"  labelProperty="company_name"  /></html:select><html:errors property="company_name"/></td></tr><tr><td width="16%" bgcolor="#dfdfdf">部门 : <td width="16%"><select id="departname" name="departname"><option value="">         </option></select></td></tr>

onchange后触发showCompanyName函数编写js脚本。在脚本中取公司下拉框的值，利用ajax将公司值传给后台AjaxGetInfo.java,从数据库中查询该公司下的部门。再返回json值，显示到departname下拉框中。其中url的路径返回值的数据都要匹配。

<script type="text/javascript">function showCompanyName(obj){   var id = obj;  //var id = $(obj).val();  var html = "<option value=\"0\" selected=\"selected\"> </option>";        $("#departname").empty();   $("#departname").append(html);   $.ajax({       type: "get",         url: "<%=path%>/AjaxGetInfo",         data: "company_id="+id,       async: false,      success: function(data){       var jsonList=eval("("+data+")");         var len = jsonList.length;    //alert(jsonList);         for(var i=0;i<len;i++){          var e = jsonList[i];          $("#departname").append("<option value="+e.id+">"+e.departname+"</option>");          }          },     });  }</script>

后台查询数据库代码.java   网上很多是用xml文件取数，一直也没搞明白。一直想写查询数据库取值的，找了好多，都是高手省略了改部分都贴出来，包括list转换为json

package com.safe.struts.action;import java.io.IOException;import com.safe.struts.util.DB;import com.safe.struts.util.Depart_company;import java.io.PrintStream;import java.sql.ResultSet;import java.util.ArrayList;import java.util.List;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import net.sf.json.JSONArray;import com.google.gson.Gson;public class AjaxGetInfo extends HttpServlet{public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {     String company_id = request.getParameter("company_id");     System.out.println("执行输出--------"+company_id);     String json = null;    DB db = null;    try {           List list_depart =new ArrayList();    //Map map = null;    db = new DB();    String sql_depart="select id,departname from department where company_id='" +company_id+ "'";    System.out.println("部门名单是____"+sql_depart);    db.connDb();    ResultSet Rs=db.executeQuery(sql_depart);    while(Rs.next()){    //list_depart.add(Rs.getString(1));    //map = new HashMap();    //map.put("id",Rs.getInt(1));    Depart_company  du=  new Depart_company();    du.setId(Rs.getInt(1));    du.setDepartname(Rs.getString(2));    list_depart.add(du);    }    Rs = null;    Gson gson = new Gson();    json = gson.toJson(list_depart);    System.out.println("json="+ json);        }    catch(Exception e){        }finally{    if (db != null)    db.closeDb();    }    response.setCharacterEncoding("utf-8");    response.getWriter().print(json);  }}

最后是web.xml配置

<servlet>      <servlet-name>AjaxGetInfo</servlet-name>         <servlet-class>com.safe.struts.action.AjaxGetInfo</servlet-class>    </servlet>    <servlet-mapping>      <servlet-name>AjaxGetInfo</servlet-name>      <url-pattern>/AjaxGetInfo</url-pattern>    </servlet-mapping>    <welcome-file-list>  <welcome-file>adminadd.jsp</welcome-file>  </welcome-file-list>

这其中还用到了jquery-1.8.3.min.js，大家可以从网上下载~