点击按钮后不报错但也没反应

点击按钮后不报错但也没反应

package jqajax;

public class Song {
	private String name;

	public Song() {
		super();
		// TODO Auto-generated constructor stub
	}

	public Song(String name) {
		super();
		this.name = name;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}
	
}
package jqajax;

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;

/**
 * Servlet implementation class songlist
 */
@WebServlet("/songlist")
public class songlist extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public songlist() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		List<Song> list = new ArrayList<Song>();
		String x = request.getParameter("t");
		if(x.equals("流行歌曲")) {
			list.add(new Song("稻香"));
			list.add(new Song("晴天"));
			list.add(new Song("告白气球"));
		}else if(x.equals("经典歌曲")) {
			list.add(new Song("千千阙歌"));
			list.add(new Song("傻女"));
			list.add(new Song("七友"));
		}else if(x.equals("摇滚歌曲")) {
			list.add(new Song("一块红布"));
			list.add(new Song("假行僧"));
			list.add(new Song("新长征路上的摇滚"));
		}
	}

}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	text-decoration: none;
}

#list {
	width: 99%;
	margin: 0 auto;
	overflow: hidden;
	text-align: center;
}

input[type=button] {
	width: 33%;
	height: 30px;
}

#container {
	text-align: center;
	width: 100%;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
</head>
<body>

	<div id="list">
		<input type="button" value="流行歌曲" id="b1"> <input
			type="button" value="经典歌曲" id="b2"> <input type="button"
			value="摇滚歌曲" id="b3">
	</div>
	<div id="container"></div>
	<script type="text/javascript">
		$("#b1").click(function() {
		        alert("aa");
			$.ajax({
				"url" : "/jqajax/songlist",
				"type" : "get",
				"data" : "t=流行歌曲",
				"dataType" : "json",
				"success" : function(json) {
					alert("aa");
					for (var i = 0; i < list.length; i++) {
						$("#container").append(list[i].name + "</br>");
					}
				}
			})
		});
		$("#b2").click(function() {
			$.ajax({
				"url" : "/jqajax/songlist",
				"type" : "get",
				"data" : "t=经典歌曲",
				"dataType" : "json",
				"success" : function(json) {
					for (var i = 0; i < list.length; i++) {
						$("#container").append(list[i].name + "</br>");
					}
				}
			})
		});
		$("#b3").click(function() {
			$.ajax({
				"url" : "/jqajax/songlist",
				"type" : "get",
				"data" : "t=摇滚歌曲",
				"dataType" : "json",
				"success" : function(json) {
					for (var i = 0; i < list.length; i++) {
						$("#container").append(list[i].name + "</br>");
					}
				}
			})
		});
	</script>
</body>
</html>

点击按键没反应,请老师帮忙看看

正在回答

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

3回答

同学你好!这是由于同学在servlet中将数据返回,所以第二个alert没有弹出,并且同学在ajax中获取数据使用的变量有误,同学可以参考以下代码来完成:

  1. servlet:

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

  2. ajax(以其中一个为例):

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

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

提问者 hblack 2019-08-06 20:57:53
好帮手慕柯南 2019-08-06 18:57:45

同学你好!

点击按钮是有反应的

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

同学哪里没反应可能是有与js地址引入有误。建议同学检查一下js的引入。如果不能够解决,同学贴一下项目的目录结构。

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

  • 提问者 hblack #1
    目录结构在楼上,这个ajax之前的弹框点击后可以弹出,问题在ajax绑定按键,注释掉第一个alert后不管是弹框还是应该显示的文本都没反应,而且不报错,麻烦老师看看为啥绑定不成功
    2019-08-06 21:00:43
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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