JAVA EE 中之AJAX 无刷新地区下拉列表三级联动
JSP页面
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Ajax无刷新三级联动</title> <% MemberDal md = new MemberDal(); //实例化封装的数据库操作类 ArrayList<Member> al1 = md.getMember(0); //获取第一级地区数据 %> <script type="application/javascript" src="jquery/jquery-1.11.3.js"></script> <script type="text/javascript"> function yijChangeJson() { //Jquery Ajax get方法异步请求调用数据 URL(第一级地区ID参数) + 回调函数 $.get("jsonMembers?parentid=" + $("#yij").val() + "&nocache=" + new Date().getTime(), function(data,status){ //解析JSON 获取数组 var array = eval(data); var erj = document.getElementById("erj"); //清空下拉列表 erj.options.length = 1; //遍历数据 for(var i = 0; i < array.length; i++) { //更改option标签内容和value erj.options.add(new Option(array[i].name, array[i].id)); } //清空第三级下拉列表 var sanj = document.getElementById("sanj"); sanj.options.length = 1; }) } function erjChangeJson() { //Jquery Ajax get方法异步请求调用数据 URL(第二级地区ID参数) + 回调函数 $.get("jsonMembers?parentid=" + $("#erj").val() + "&nocache=" + new Date().getTime(), function(data,status){ //解析JSON 获取数组 var array = eval(data); var sanj = document.getElementById("sanj"); //清空下拉列表 sanj.options.length = 1; //遍历数据 for(var i = 0; i < array.length; i++) { //更改option标签内容和value sanj.options.add(new Option(array[i].name, array[i].id)); } }) } </script> </head> <body> <form> 一级地区: <select id="yij" name="yij" onchange="yijChangeJson()"> <option value="0">未选择</option> <% if(al1 != null) { for(Member m : al1) //遍历获取第一级地区数据集合并在option标签内输出 { out.append("<option value='"+m.getId()+"'>"+m.getName()+"</option>"); } } %> </select> 二级地区： <select id="erj" name="erj" onchange="erjChangeJson()"> <option value="0">未选择</option> </select> 三级地区： <select id="sanj" name="sanj" > <option value="0" selected>未选择</option> </select> </body> </html>
servlet
package com.hanqi; import java.io.IOException; import java.util.ArrayList; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.hanqi.dao.Member; import com.hanqi.dao.MemberDal; import com.alibaba.fastjson.*;//引入JSON的jar包 @WebServlet("/jsonMembers") public class jsonMembers extends HttpServlet { private static final long serialVersionUID = 1L; public jsonMembers() { super(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.setContentType("text/html; charset=UTF-8"); String parentid = request.getParameter("parentid");//接收ajax发送参数 MemberDal md = new MemberDal(); //实例化封装的数据库操作类 if(parentid != null && parentid.trim().length() > 0) { int i = Integer.parseInt(parentid);//数据类型转换 String s = ""; try { ArrayList<Member> al = md.getMember(i); //根据参数查询数据获取集合 if(al != null) { s = JSON.toJSONString(al); //将集合以字符串形式存入JSON } } catch (Exception e) { e.printStackTrace(); } response.getWriter().append(s);//把JSON数据发送给JSP } } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } }
