打卡

来源：3-6 自由编程

MengMengdacw

2021-07-24 14:34:25

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="width: 620px;">
        <input style="width: 200px;" type="button"
               id="popular" name="popular" value="流行歌曲">

        <input style="width: 200px;" type="button"
               id="classic" name="classic" value="经典歌曲">

        <input style="width: 200px;" type="button"
               id="rock" name="rock" value="摇滚歌曲">
    <div style="width: 600px; text-align: center;">
        <div id="content"></div>
    </div>
</div>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $("#popular").click(function () {
        ajaxMethod("/jquey/music?type=popular",true)
    })
    $("#classic").click(function () {
        ajaxMethod("/jquey/music?type=classic",true)
    })
    $("#rock").click(function () {
        ajaxMethod("/jquey/music?type=rock",true)
    })

    function ajaxMethod(url,aysc){
        var httmXML;
        if (window.XMLHttpRequest){
            httmXML = new XMLHttpRequest();
        }else {
            httmXML = new ActiveXObject("Microsoft.XMLHTTP");
        }
        httmXML.open("get",url,aysc);
        httmXML.send();
        httmXML.onreadystatechange = function () {
            if (httmXML.readyState == 4 && httmXML.status == 200){
                var html = "";
                var responseText = httmXML.responseText;
                var json = JSON.parse(responseText);
                for (let i = 0; i < json.length; i++) {
                    html += "<h1>"+json[i]+"</h1>"
                }
                $("#content").html(html);
            }

        }
    }
</script>
</body>
</html>

package com.imooc.ajax;

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