交作业交作业交作业
<!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放在后面，不能像老师的代码放在前面。要放在前面在该怎么做？
225
收起
正在回答 回答被采纳积分+1
2回答
mixiaofan
2019-11-25 16:30:23
<!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);
}
}对照其他同学的做了修改，请问哪里还需要修改？
相似问题
登录后可查看更多问答，登录/注册
2. 从网页搭建入门JavaWeb
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星