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(""+m.getName()+"");
}
}
%>
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 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);
    }

}

 

转载于:https://www.cnblogs.com/OldZhao/p/5067067.html

你可能感兴趣的:(JAVA EE 中之AJAX 无刷新地区下拉列表三级联动)