【実装】JavaWeb 2つのリンケージメニュー

結果を実現

チャンネル情報

package demo;

public class Channel {
    private String code; //频道编码
    private String name; //频道名称

    public Channel() {

    }

    public Channel(String code, String name) {
        super();
        this.code = code;
        this.name = name;
    }

    public String getCode() {
        return code;
    }

    public void setCode(String code) {
        this.code = code;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

}

サーブレットは、データを提供します

package demo;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

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.alibaba.fastjson.JSON;

/**
 * Servlet implementation class ChannelServlet
 */
@WebServlet("/ch_content")
public class ChannelServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public ChannelServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String level = request.getParameter("level"); //获取频道，1为父类频道，2为子类频道
        String parent = request.getParameter("parent"); //获取父类频道code，以便于加载子类频道信息
        
        List<Channel> chlist = new ArrayList<>();
        if(level.equals("1")) {
            chlist.add(new Channel("ai", "前沿/区块链/人工智能"));
            chlist.add(new Channel("web", "前端/小程序/js"));
        }else if(level.equals("2")) {
            if(parent.equals("ai")) {
                chlist.add(new Channel("micro", "微服务"));
                chlist.add(new Channel("blockchain", "区块链"));
                chlist.add(new Channel("other", "..."));
            }else if(parent.equals("web")) {
                chlist.add(new Channel("html", "HTML"));
                chlist.add(new Channel("css", "CSS"));
                chlist.add(new Channel("other", "..."));
            }
        }
        
        String json = JSON.toJSONString(chlist);
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().println(json);
    }
    
}

Ajaxリクエストデータ

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
    //获取父类频道的数据
    $(function(){
        $.ajax({
            "url" : "/ajax/ch_content",
            "type" : "get",
            "data" : {"level" : "1"},
            "dataType" : "json",
            "success" : function(json){
                var html = "";
                for(var i = 0; i < json.length; i++){
                    html += "<option value='" + json[i].code + "'>" + json[i].name + "</option>";
                }
                $("#lv1").append(html);
            }
        })
    })
    
    //联动子类频道的数据
    $(function(){
        $("#lv1").change(function(){
            var parent = $(this).val(); //获取当前选项的value值
            $.ajax({
                "url" : "/ajax/ch_content",
                "type" : "get",
                "data" : {"level" : "2", "parent" : parent},
                "dataType" : "json",
                "success" : function(json){
                    var html = "";
                    $("#lv2>option").remove();
                    for(var i = 0; i < json.length; i++){
                        html += "<option value='" + json[i].code + "'>" + json[i].name + "</option>";
                    }
                    $("#lv2").append(html);
                }
            })
        })
    })
</script>
</head>
<body>
<select id="lv1" style="width:200px;height:30px;">
    <option selected="selected">请输入</option>
</select>
<select id="lv2" style="width:200px;height:30px;"></select>
</body>
</html>

【実装】JavaWeb 2つのリンケージメニュー

結果を実現

チャンネル情報

サーブレットは、データを提供します

Ajaxリクエストデータ

おすすめ