参考了大家问答，3-6自由编程

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 NewsListServlet
 */
@WebServlet("/music_list")
public class MusicListServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public MusicListServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

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

}

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>播放列表查看</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<style>
	#jar input{
	width: 100%;
	}
</style>
</head>
<body>
	<div id = "jar">
	<table style="width:100%">
	<tr>
	<td><input name="song" id="pop" type="button" value="流行歌曲"></td>
	<td><input name="song" id="classic" type="button" value="经典歌曲"></td>
	<td><input name="song" id="rock" type="button" value="摇滚歌曲"></td>
	</tr>
	</table>
	</div>
	<div id="container"></div>
	<script type="text/javascript">
	function SongsFetch(id){
		$.ajax({
			"url":"/ajax/music_list",
			"type":"get",
			"data":{"t":id},
			"dataType":"json",
			"success":function(json){
				for(var i=0; i <json.length; i++){
					$("#container").append("<h1 style='text-align:center'>"+json[i]+"</h1>");
				}
			}
		})
	}
	
	var list = document.getElementsByName("song");
	for(var i=0; i<list.length; i++){
		var temp = list[i].id;
		list[i].onclick = function(){
			$("#container").empty();
			SongsFetch(this.id);
		}
	}
	
</script>
</body>
</html>

RobinZang 2019-10-01

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

收起

2回答

慕田峪1061482 2019-10-21 11:24:13

可以一步一步进行说明一下吗？都是什么？

收起回答

好帮手慕小班 #1

同学你好，这里同学是哪里不理解呐，1、document.getElementsByName("song");是获取到这三个input框。2、遍历这个input框的集合，添加onclick 。3、在事件中调用发送ajax请求的方法SongsFetch，发送请求，对得到的响应数据添加到页面中。继续加油~ 祝：学习愉快~

2019-10-21 16:07:52