点击按钮怎么没反应

点击按钮怎么没反应

http://img1.sycdn.imooc.com//climg/5cca8e7400014a5d13660768.jpg

package com.imooc.servlet;

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 {
		String type = request.getParameter("t");
        List<String> list = new ArrayList<>();
        if(type.equals("popular")) {
            list.add("稻香");
            list.add("晴天");
            list.add("告白气球");
        }else if(type.equals("classic")) {
            list.add("千千阙歌");
            list.add("傻女");
            list.add("七友");
        }else if(type.equals("rock")) {
            list.add("一块红布");
            list.add("家行政");
            list.add("新长征路上的摇滚");
        }
        String json = JSON.toJSONString(list);
        System.out.println(json);
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().println(json);
     
    }
	

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.4.0.js"></script>
<script type="text/javascript">
 $(function()){
	 $(".popular").click(function(){
	        $.ajax({
	            "url":"/FirstServlet/song",
	            "type":"get",
	            "data":"t=popular",
	            "dataType":"json",
	            "success":function(json) {
	                console.log(json);
	                 for(var i =0;i<json.length;i++){
	                     $("#song").append("<h1>"+json[i]+"<h1>");
	                 }
	            }
	        })
	    })
 }
    
</script>
</head>
<body>
 
    <input type="button" value="流行歌曲" id = "popular" class="popular">
    <input type="button" value="经典歌曲" id = "classic" class="classic">
    <input type="button" value="摇滚歌曲" id= "rock" class="rock">
    <div id="song"></div>
 
</body>
</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕柯南 2019-05-06 11:36:09

同学你好!同学需要给这三个按钮每一个都添加一个点击事件

http://img1.sycdn.imooc.com//climg/5ccfab360001cfe005270084.jpg

每个事件传入后台的参数都应该改变,也就是传相应的类型给后台

http://img1.sycdn.imooc.com//climg/5ccfab5b0001748c05240211.jpg

如果我的回答解决了你的疑惑,请采纳,祝学习愉快~

好帮手慕柯南 2019-05-04 16:18:23

同学你好!点击按钮没有反应是因为同学的js括号对应有误,同学可参考如下代码,修改自己的js

http://img1.sycdn.imooc.com//climg/5ccd4ac90001735a07370348.jpg

如果我的回答解决了你的疑惑,请采纳,祝学习愉快~


  • 提问者 the_shy #1
    运行出来只有第一个集合的歌,而且再点击popular,还是那组歌,怎么改程序呢?
    2019-05-05 21:21:44
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师