JAVA EE 中之AJAX 無刷新地區下拉列表三級聯動

時間 2019-12-08

標籤 java ajax 刷新地區下拉列表三級聯動欄目 Java 简体版

原文原文鏈接

JSP頁面javascript

<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>

servlethtml

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);
    }

}