交作业交作业交作业
<!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 星