交作业交作业交作业
来源：3-6 自由编程
mixiaofan
2019-11-25 16:14:31
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input {
width: 33%;
text-align: center;
}
#text {
text-align: center;
}
</style>
</head>
<body>
<form>
<input id="b1" type="button" value="流行歌曲">
<input id="b2" type="button" value="经典歌曲">
<input id="b3" type="button" value="摇滚歌曲">
<div id="text"></div>
</form>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
var list = document.getElementsByTagName("input");
list[0].onclick = function () {
f(0);
};
list[1].onclick = function () {
f(1);
};
list[2].onclick = function () {
f(2);
};
function f(i) {
$.ajax({
"url": "/3_6/songs",
"type": "get",
"dataType": "json",
"success": function (json) {
console.log(json[i]);
document.getElementById("text").innerHTML = json[i];
}
});
}
</script>
</body>
</html>package com.imooc.song;
import com.alibaba.fastjson.JSON;
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 java.io.IOException;
import java.util.ArrayList;
import java.util.List;
@WebServlet(urlPatterns = "/songs")
public class SongServlet extends HttpServlet {
public SongServlet() {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List list = new ArrayList();
String type = request.getParameter("t");
list.add("<h1>稻香<br>晴天<br>告白气球</h1>");
list.add("<h1>千千阙歌<br>傻女<br>七友</h1>");
list.add("<h1>一块红布<br>假行僧<br>新长征路上的摇滚</h1>");
String json = JSON.toJSONString(list);
System.out.println(json);
response.setContentType("text/html;charset=utf-8");
response.getWriter().println(json);
}
}除了输出部分的代码，其他和前面2-8作业代码很像啊
但是按我的做法就只能吧script放在后面，不能像老师的代码放在前面。要放在前面在该怎么做？
写回答
2回答
-
好帮手慕柯南
2019-11-25
同学你好，两种方法都完成的不错，加油，祝学习愉快~
0 -
mixiaofan
提问者
2019-11-25
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> input { width: 33%; text-align: center; } #text { text-align: center; } </style> </head> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> <script type="text/javascript"> $(function () { $("input").click(function () { var song = ""; song = $(this).attr("value"); $.ajax({ "url": "/3_6/songs", "type": "get", "data": {"t": song}, "dataType": "json", "success": function (json) { $("#text").html(""); $("#text").html(json); } }); }); }); </script> <body> <form> <input id="b1" type="button" value="流行歌曲"> <input id="b2" type="button" value="经典歌曲"> <input id="b3" type="button" value="摇滚歌曲"> <div id="text"></div> </form> </body> </html>package com.imooc.song; import com.alibaba.fastjson.JSON; 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 java.io.IOException; import java.util.ArrayList; import java.util.List; @WebServlet(urlPatterns = "/songs") public class SongServlet extends HttpServlet { public SongServlet() { } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { List list = new ArrayList(); String type = request.getParameter("t"); if (type != null && type.equals("流行歌曲")) { list.add("<h1>稻香<br>晴天<br>告白气球</h1>"); }else if (type != null && type.equals("经典歌曲")) { list.add("<h1>千千阙歌<br>傻女<br>七友</h1>"); }else if (type != null && type.equals("摇滚歌曲")) { list.add("<h1>一块红布<br>假行僧<br>新长征路上的摇滚</h1>"); } String json = JSON.toJSONString(list); System.out.println(json); response.setContentType("text/html;charset=utf-8"); response.getWriter().println(json); } }对照其他同学的做了修改，请问哪里还需要修改？
0
相似问题