这个点击事件要怎么处理才好
来源：3-6 自由编程
邢文凯888
2019-09-05 23:28:01
这个点击事件要怎么处理才好，要不就循环3遍，要不点击之后一直往下挨着显示，而且点击第三个按钮还会显示一个千千阙歌，有没有一个简洁的方法处理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
input{
width: 270px;
height: 25px;
}
#div2{
width:810px;
text-align: center;
}
</style>
</head>
<body>
<div>
<input type="button" value="流行歌曲" id="g1">
<input type="button" value="经典歌曲" id="g2">
<input type="button" value="摇滚歌曲" id="g3">
</div>
<div id="div2"></div>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$("input").mouseenter(function(){
$(this).css("cursor" , "pointer");
})
$(function(){
$.ajax(
{
"url" : "/ajax/gq_dj" ,
"type" : "get" ,
"data" : "" ,
"dataType" : "json" ,
"success" : function(json){
console.log(json);
var html = "";
var html1 = "";
var html2 = "";
for(var i = 0;i<json.length;i++){
var news = json[i];
html = html + "<h2>"+ news.lx +"</h2>";
html1 = html1 + "<h2>"+ news.jd +"</h2>";
html2 = html1 + "<h2>"+ news.yg +"</h2>";
$("#g1").click(function(){
$("#div2").append(html);
})
$("#g2").click(function(){
$("#div2").append(html1);
})
$("#g3").click(function(){
$("#div2").append(html2);
})
}
}
}
)
})
</script>
</body>
</html>
package gqgc;
public class gq {
private String lx;
private String jd;
private String yg;
public gq() {
}
public gq(String lx, String jd, String yg) {
this.lx = lx;
this.jd = jd;
this.yg = yg;
}
public String getLx() {
return lx;
}
public void setLx(String lx) {
this.lx = lx;
}
public String getJd() {
return jd;
}
public void setJd(String jd) {
this.jd = jd;
}
public String getYg() {
return yg;
}
public void setYg(String yg) {
this.yg = yg;
}
}
package gqgc;
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 gqdj
*/
@WebServlet("/gq_dj")
public class gqdj extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public gqdj() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List list = new ArrayList();
list.add(new gq("稻香","千千阙歌","一块红布"));
list.add(new gq("晴天","傻女","假行僧"));
list.add(new gq("告白气球","七友","新长征路上的摇滚"));
String json = JSON.toJSONString(list);
response.setContentType("text/html;charset=UTF-8");
response.getWriter().println(json);
}
}
1回答
-
好帮手慕阿满
2019-09-06
同学你好，在Servlet中，list添加了3个元素，所以在html中，json.length的长度为3，for循环3次，所以在显示时会出现3次。
这里建议同学再input标签上添加onclick事件，如：
然后在JavaScript中添加check函数，在ajax中，data提交参数，如：
在Servlet中，获取提交的参数，根据参数，在List集合中添加不同的歌曲，然后在返回，如：
如果我的回答解决了你的疑惑，请采纳。祝：学习愉快~
0
相似问题