编程练习
来源：3-6 自由编程
sx1011
2021-01-05 17:50:41
怎么优化一下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<style type="text/css">
input {
width: 33%;
}
#songDiv {
text-align: center;
}
</style>
<body>
<input type="button" id="popBtn" value="流行歌曲">
<input type="button" id="oldBtn" value="经典歌曲">
<input type="button" id="rockBtn" value="摇滚歌曲">
<div id="songDiv"></div>
<script type="text/javascript">
/* $("input").on("click",function(){
var val = $(this).val();
$.ajax({
"url" : "/ajax/song",
"data" : {"flag" : val},
"dataType" : "json",
"type" : "get",
"success" : function(json){
console.log(json);
var html = "";
for(var i = 0;i<json.length;i++){
html = html + "<h1>" + json[i] + "</h1>";
}
$("#songDiv").html(html);
}
})
}) */
$("#popBtn").click(function() {
$.ajax({
"url" : "/ajax/song",
"data" : "flag=pop",
"dataType" : "json",
"type" : "get",
"success" : function(json) {
var html = "";
for (var i = 0; i < json.length; i++) {
// 使用append方法追加，连续点击会累加。
html = html + "<h1>" + json[i] + "</h1>";
}
$("#songDiv").html(html);
},
"error" : function(xmlhttp) {
console.log(xmlhttp);
}
});
})
$("#oldBtn").click(function() {
$.ajax({
"url" : "/ajax/song",
"data" : "flag=old",
"dataType" : "json",
"type" : "get",
"success" : function(json) {
var html = "";
for (var i = 0; i < json.length; i++) {
// 使用append方法追加，连续点击会累加。
html = html + "<h1>" + json[i] + "</h1>";
}
$("#songDiv").html(html);
},
"error" : function(xmlhttp) {
console.log(xmlhttp);
}
});
})
$("#rockBtn").click(function() {
$.ajax({
"url" : "/ajax/song",
"data" : "flag=rock",
"dataType" : "json",
"type" : "get",
"success" : function(json) {
var html = "";
for (var i = 0; i < json.length; i++) {
// 使用append方法追加，连续点击会累加。
html = html + "<h1>" + json[i] + "</h1>";
}
$("#songDiv").html(html);
},
"error" : function(xmlhttp) {
console.log(xmlhttp);
}
});
})
</script>
</body>
</html>
package com.imooc.ajax;
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 SongServlet
*/
@WebServlet("/song")
public class SongServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public SongServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<String> json = new ArrayList<String>();
String flag = request.getParameter("flag");
if(flag.equals("pop")) {
json.add("稻香");
json.add("晴天");
json.add("告白气球");
}else if(flag.equals("old")) {
json.add("千千阙歌");
json.add("傻女");
json.add("七友");
}else if(flag.equals("rock")) {
json.add("一块红布");
json.add("假行僧");
json.add("新长征路上的摇滚");
}
response.setContentType("text/html;charset=utf-8");
response.getWriter().println(JSON.toJSONString(json));
}
}
写回答
1回答
-
同学你好，1. 已完成练习，继续加油！
2. 同学可以在input标签中添加data-id赋值要传递的参数，然后在js中获取data-id中的数据。如下所示：
祝学习愉快！
0
