请问老师我这种写法怎样清除前面的内容呢?

来源:3-6 自由编程

菜菜菜好了没

2019-03-22 17:30:38

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<table width="100%">
		<tr>
			<td width="33%"><button id="fashion" style="width:100%;">流行歌曲</button></td>
			<td width="33%"><button id="classics" style="width:100%;" >经典歌曲</button></td>
			<td width="33%"><button id="rock" style="width:100%;">摇滚歌曲</button></td>
		</tr>
	</table>
	<div id="show" style="text-align: center;"></div>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$("#fashion, #classics, #rock").click(function(){
		$.ajax({
			"url" : "/ajax/song_list",
			"type" : "get",
			"data" : "t="+this.id,
			"dataType" : "json",
			"success" : function(json){
				console.log(json);
				for(var i = 0; i < json.length; i++){
					$("#show").append("<h1>" + json[i].songs + "</h1>"); //append追加
				}
			},
			"error" : function(xmlhttp, errorText){ //errorText为报错文本
				if(xmlhttp.status == "405"){
					alert("无效的请求方式!");
				}else if(xmlhttp.status == "404"){
					alert("未找到URL资源!");
				}else if(xmlhttp.status == "500"){
					alert("服务器内部错误,请联系管理员!");
				}else{
					alert("产生异常,请联系管理员!");
				}
			}
		});
	});
	
package com.fangmz.content;

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("/song_list")
public class SongListServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String type = request.getParameter("t");
		List list = new ArrayList();
		if(type != null && type.equals("fashion")) {
			list.add(new Song("稻香"));
			list.add(new Song("晴天"));
			list.add(new Song("告白气球"));
		}else if(type != null && type.equals("classics")) {
			list.add(new Song("千千阙歌"));
			list.add(new Song("傻女"));
			list.add(new Song("七友"));
		}else if(type != null && type.equals("rock")) {
			list.add(new Song("一块红布"));
			list.add(new Song("假行僧"));
			list.add(new Song("新长征路上的摇滚"));
		}
		String json = JSON.toJSONString(list);
		response.setContentType("text/html;charset=utf-8");
		response.getWriter().println(json);
	}

}

package com.fangmz.content;


public class Song {


private String songs;


public String getSongs() {

return songs;

}


public void setSongs(String songs) {

this.songs = songs;

}


public Song() {

}

public Song(String songs) {

super();

this.songs = songs;

}

}

http://img.mukewang.com/climg/5c94ab2a0001595516610898.jpg

写回答

1回答

芝芝兰兰

2019-03-22

同学你好。

可以在ajax代码的成功处理中,将之前append进的子元素都清空:

http://img.mukewang.com/climg/5c94c4af0001ad0b08850271.jpg


需删除元素和内容,一般可使用以下两个 jQuery 方法:

1、remove() 方法删除被选元素及其子元素。

2、empty() 方法删除被选元素的子元素。

如果还有疑问,可以继续提问。如果解答了同学的疑问,望采纳~

祝学习愉快~

0

0 学习 · 10204 问题

查看课程