请问老师我这种写法怎样清除前面的内容呢?
来源: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;
}
}

1回答
同学你好。
可以在ajax代码的成功处理中,将之前append进的子元素都清空:

需删除元素和内容,一般可使用以下两个 jQuery 方法:
1、remove() 方法删除被选元素及其子元素。
2、empty() 方法删除被选元素的子元素。
如果还有疑问,可以继续提问。如果解答了同学的疑问,望采纳~
祝学习愉快~
相似问题
回答 2
回答 1
回答 2
回答 1
回答 1