3-9怎样实现当点击其他按钮的时候可以清空前面的内容？

来源：3-6 自由编程

qq_慕UI0173712

2019-09-27 17:46:07

html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="button" value="流行歌曲" name="popluar" id="A">
<input type="button" value="经典歌曲" name="classic" id="B">
<input type="button" value="摇滚歌曲" name="Rock" id="C">
<span id="songs"></span>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$("#A").click(function(){
	$("div").val();//清空指定元素内容
$(function(){
	$.ajax({
		"url":"/jQuery/song",
		"type":"get",
		"data":"name=popluar",
		"dataType":"json",
		"success" :function(json){
			console.log(json);
			for(var i=0;i<json.length;i++){
				$("#songs").append("<h3>"+json[i]+"</h3>");
			}
		}
	})
	
})
})

$("#B").click(function(){
	$("div").val();//清空指定元素内容

$(function(){
	$.ajax({
		"url":"/jQuery/song",
		"type":"get",
		"data":"name=classic",
		"dataType":"json",
		"success" :function(json){
			console.log(json);
			for(var i=0;i<json.length;i++){
				$("#songs").append("<h3>"+json[i]+"</h3>");
			}
		}
	})
	
})
})

$("#C").click(function(){
	$("div").val();//清空指定元素内容

$(function(){
	$.ajax({
		"url":"/jQuery/song",
		"type":"get",
		"data":"name=Rock",
		"dataType":"json",
		"success" :function(json){
			console.log(json);
			for(var i=0;i<json.length;i++){
				$("#songs").append("<h3>"+json[i]+"</h3>");
			}
		}
	})
	
})
})
</script>
</body>
</html>

Servlet代码

package com.winking.Ajax._jQuery_demo;

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("/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 {
		String type =request.getParameter("name");
		List list = new ArrayList();
		if(type !=null&&type.equals("popluar")) {
			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("新长征路上的摇滚");
		}
		response.setContentType("text/html;charset=UTF-8");
		String json =JSON.toJSONString(list);
		response.getWriter().println(json);	
		System.out.println(json);
	}


}

写回答

1回答