分享一下代码，顺便请教一下老师如何在不修改servlet的情况下简化script代码
来源：3-6 自由编程
leechee君
2019-02-27 15:57:04
//servlet
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 MusicListServlet
*/
@WebServlet("/music")
public class MusicListServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("跳转成功");
String type = request.getParameter("m");
List<MusicList> list = new ArrayList<MusicList>();
if(type != null && type.equals("lc")) {
list.add(new MusicList("有点甜","光能使者","Flower Dance"));
list.add(new MusicList("Lemon","打上花火","二泉映月"));
list.add(new MusicList("修炼爱情","鸟之诗","水边的阿缇丽娜"));
}else if(type == null || type.equals("leechee")){
list.add(new MusicList("","Letter song",""));
list.add(new MusicList("","",""));
list.add(new MusicList("","",""));
}
String json = JSON.toJSONString(list);
System.out.println(json);
response.setContentType("text/html;charset=UTF-8");
response.getWriter().println(json);
}
}
//java
public class MusicList {
private String pop;
private String anime;
private String absolute;
public MusicList() {
super();
// TODO Auto-generated constructor stub
}
public MusicList(String pop, String anime, String absolute) {
super();
this.pop = pop;
this.anime = anime;
this.absolute = absolute;
}
public String getPop() {
return pop;
}
public void setPop(String pop) {
this.pop = pop;
}
public String getAnime() {
return anime;
}
public void setAnime(String anime) {
this.anime = anime;
}
public String getAbsolute() {
return absolute;
}
public void setAbsolute(String absolute) {
this.absolute = absolute;
}
}<-- jsp -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>播放列表查看</title>
<style>
#a, #b, #c {
width: 33%;
}
#bg {
text-align: center;
width: 200px;
margin: 0 auto;
}
</style>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$("#a").click(function(){
$.ajax({
"url" : "/ajax/music",
"type" : "get",
"data" : {"m":"lc", "abc":"123"},
"dataType" : "json",
"success" : function(json){
var text = "";
for(var i = 0 ; i < json.length ; i++){
console.log(json);
text = text + json[i].pop + "\n";
}
document.getElementById("bg").innerText = text;
},
"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("产生异常请联系管理员");
}
}
})
});
$("#b").click(function(){
$.ajax({
"url" : "/ajax/music",
"type" : "get",
"data" : {"m":"lc", "abc":"123"},
"dataType" : "json",
"success" : function(json){
var text = "";
for(var i = 0 ; i < json.length ; i++){
console.log(json);
text = text + json[i].anime + "\n";
}
document.getElementById("bg").innerText = text;
},
"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("产生异常请联系管理员");
}
}
})
});
$("#c").click(function(){
$.ajax({
"url" : "/ajax/music",
"type" : "get",
"data" : {"m":"lc", "abc":"123"},
"dataType" : "json",
"success" : function(json){
var text = "";
for(var i = 0 ; i < json.length ; i++){
console.log(json);
text = text + json[i].absolute + "\n";
}
document.getElementById("bg").innerText = text;
},
"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>
</head>
<body>
<input id="a" type="button" value="流行歌曲">
<input id="b" type="button" value="动漫歌曲">
<input id="c" type="button" value="纯音乐">
<div id="bg"></div>
</body>
</html>写回答
1回答
-
同学的代码完成的不错，不过是建议修改一下Servlet代码，不需要将所有的歌曲信息都返回。而是返回查询类型的歌曲。修改意见：不需要定义MusicList类，在ajax提交时data只提交歌曲类型，如 "data": {"m": "pop"}，在servlet中，接收m后，使用equals比较，list集合中添加String类型值，即歌曲即可。然后只返回查询的歌曲类型信息即可，如流行歌曲只返回有点甜，光能使者，Flower Dance等。其他的两个类型歌曲不返回。
祝：学习愉快~
0
相似问题