课题打卡~请老师检查

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div style="width: 620px;">
		<form action="ajax/emp" method="get">
			<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="摇滚歌曲">
		</form>
	</div>
	<div style="width: 600px; text-align: center;">
		<div id="content"></div>
	</div>
	<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		$(function() {
			$("#popular").click(function() {
				initAjax("ajax/song","get","flag=popular","json");
			});	
			$("#classic").click(function() {
				initAjax("ajax/song","get","flag=classic","json");
			});	
			$("#rock").click(function() {
				initAjax("ajax/song","get","flag=rock","json");
			});	
		});
		function initAjax(url,type,data,dataType){
			$.ajax({
				"url" : url,
				"type" : type,
				"data" : data,
				"dataType" : dataType,
				"success" : function(json) {
					$("#content").text("");
					console.log(json.length);
				    for(var i=0;i<json.length;i++){
				    	$("#content").append("<h2><b>"+json[i].name+"</b></h2>");
				    }					   						
				},
				"error" : function(xmlhttp, errorText) {
					console.log(xmlhttp);
					console.log(errorText);
					if(xmlhttp.status == 400){
						alert("无效的请求");
					}else if(xmlhttp.status == 404){
						alert("无法找到文件");
					}else if(xmlhttp.status == 500){
						alert("内部服务器错误");
					}
				}
			});
		}
	</script>
</body>
</html>

package com.imooc.ajax;

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 SongServlet
 */
@WebServlet("/ajax/song")
public class SongServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#HttpServlet()
	 */
	public SongServlet() {
		super();
		// TODO Auto-generated constructor stub
	}

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		List<Song> song = new ArrayList<Song>();
		String flag = request.getParameter("flag");
		if (flag.equals("popular")) {
			song.add(new Song(1, "稻香"));
			song.add(new Song(2, "晴天"));
			song.add(new Song(3, "告白气球"));
		} else if (flag.equals("classic")) {
			song.add(new Song(1, "千千阙歌"));
			song.add(new Song(2, "傻女"));
			song.add(new Song(3, "七友"));
		} else if (flag.equals("rock")) {
			song.add(new Song(1, "一块红布"));
			song.add(new Song(2, "假行憎"));
			song.add(new Song(3, "新长征路上的摇滚"));
		}
		String json = JSON.toJSONString(song);
		response.setContentType("text/html;charset=UTF-8");
		response.getWriter().println(json);
	}

}

慕仙4530950 2020-07-09

源自：jQuery与Ajax入门 3-6 自由编程