打卡

来源：3-6 自由编程

慕数据9061302

2021-05-26 14:16:45

Servlet

import com.alibaba.fastjson.JSON;

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 java.io.IOException;
import java.util.ArrayList;
import java.util.List;

@WebServlet("/music_list")
public class MusicListServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        String type=req.getParameter("type");
        List<String> list=new ArrayList<>();
        if(type.equals("pop")){
            list.add("稻香");
            list.add("晴天");
            list.add("告白气球");
        }else if(type.equals("classic")){
            list.add("千千阙歌");
            list.add("傻女");
            list.add("七友");
        }else if(type.equals("rock")){
            list.add("一块红布");
            list.add("假行僧");
            list.add("新长征路上的摇滚");
        }
        String json= JSON.toJSONString(list);
        resp.getWriter().println(json);
    }
}

JSP

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        input {
            width: 300px;
        }

        div {
            width: 900px;
            text-align: center;
        }
    </style>
</head>
<body>
<input type="button" id="pop" value="流行音乐"/>
<input type="button" id="classic" value="古典音乐"/>
<input type="button" id="rock" value="摇滚音乐"/>
<div id="list_content"></div>
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
<script type="text/javascript">
    function fun1(type) {
        $.ajax({
            "url": "/ajax/music_list",
            "type": "GET",
            "data": {"type": type},
            "dataType": "json",
            "success": function (json) {
                var html = "";
                for (var i = 0; i < json.length; i++) {
                    html = html + "<h1>" + json[i] + "</h1>";
                }
                console.log(html);
                // document.getElementById(type).onclick=function (){
                //     console.log(html);
                //     $("div").html(html);
                // }
                $("#"+type).click(function () {
                    console.log(html);
                    $("div").html(html);
                });
            },
            "error": function () {
                alert("error");
            }
        })
    }

    fun1("pop");
    fun1("classic");
    fun1("rock");
    // $("#pop").click = function () {
    //     $("div").html(fun1("pop"));
    // };
    // $("#classic").click = function () {
    //     $("div").html(fun1("classic"));
    // };
    // $("#rock").click = function () {
    //     $("div").html(fun1("rock"));
    // };
</script>
</body>
</html>