依次点击按钮无法清空画面达不到要求的效果

来源：3-6 自由编程

你不是最丑的

2019-02-04 01:02:02

文件名   music.jsp


<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
	width: 100%;
	text-align:center;
}

input {
	width: 33%;
}
</style>
</head>
<body>
	<div>
		<input id="fashionmusic" type="button" value="流行音乐"> <input
			id="classicmusic" type="button" value="古典音乐"> <input
			id="rockmusic" type="button" value="摇滚音乐">
	</div>
	<div id="content"></div>
	<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	<script type="text/javascript">
//点击流行音乐
$("#fashionmusic").click(function(){
	$.ajax({
		//发送请求地址
		"url":"/ajax/MusicServlet",
		//请求类型
		"type":"get",
		//向服务器传递的参数
		"data":{"song":"fashionmusic"},
		//服务器响应的数据类型
		"dataType":"json",
		//接收响应时的处理函数
		"success":function(json){
			console.log(json);
			for(var i=0;i<json.length;i++){
				$("#content").append("<h1>"+json[i]+"</h1>");
			}
			
		},
		"error":function(xmlhttp,errorText){
			console.log(xmlhttp);
			console.log(errorText);
			if(xmlhttp.status=="405"){
				alert("无效的请求方式");
			}else if(xmlhttp.status=="404"){
				alert("未找到url资源");
			}else if(xmlhttp.status=="500"){
				alert("服务器内部错误 请联系管理员");
			}else{
				alert("产生异常 请联系管理员");
			}
		}
	})
})

//点击古典音乐
$("#classicmusic").click(function(){
	$.ajax({
		//发送请求地址
		"url":"/ajax/MusicServlet",
		//请求类型
		"type":"get",
		//向服务器传递的参数
		"data":{"song":"classicmusic"},
		//服务器响应的数据类型
		"dataType":"json",
		//接收响应时的处理函数
		"success":function(json){
			console.log(json);
			for(var i=0;i<json.length;i++){
				$("#content").append("<h1>"+json[i]+"</h1>");
			}
			
		},
		"error":function(xmlhttp,errorText){
			console.log(xmlhttp);
			console.log(errorText);
			if(xmlhttp.status=="405"){
				alert("无效的请求方式");
			}else if(xmlhttp.status=="404"){
				alert("未找到url资源");
			}else if(xmlhttp.status=="500"){
				alert("服务器内部错误 请联系管理员");
			}else{
				alert("产生异常 请联系管理员");
			}
		}
	})
})
//点击摇滚音乐
$("#rockmusic").click(function(){
	$.ajax({
		//发送请求地址
		"url":"/ajax/MusicServlet",
		//请求类型
		"type":"get",
		//向服务器传递的参数
		"data":{"song":"rockmusic"},
		//服务器响应的数据类型
		"dataType":"json",
		//接收响应时的处理函数
		"success":function(json){
			console.log(json);
			for(var i=0;i<json.length;i++){
				$("#content").append("<h1>"+json[i]+"</h1>");
			}
			
		},
		"error":function(xmlhttp,errorText){
			console.log(xmlhttp);
			console.log(errorText);
			if(xmlhttp.status=="405"){
				alert("无效的请求方式");
			}else if(xmlhttp.status=="404"){
				alert("未找到url资源");
			}else if(xmlhttp.status=="500"){
				alert("服务器内部错误 请联系管理员");
			}else{
				alert("产生异常 请联系管理员");
			}
		}
	})
})
</script>
</body>
</html>





文件名  MusicServlet.java


package com.imooc.music;

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;


@WebServlet("/MusicServlet")
public class MusicServlet extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	String song=request.getParameter("song");
		List list=new ArrayList();
		if("fashionmusic".equals(song)) {
			list.add("稻香");
			list.add("晴天");
			list.add("告白气球");
		}else if("classicmusic".equals(song)) {
			list.add("千千阙歌");
			list.add("傻女");
			list.add("七友");
		}else if("rockmusic".equals(song)){
			list.add("一块红布");
			list.add("假行僧");
			list.add("新长征路上的摇滚");
		}
		String json=JSON.toJSONString(list);
		response.setContentType("text/html;charset=UTF-8");
		response.getWriter().println(json);
	}

	

}

写回答

1回答