请问我的代码怎么修改比较好？

来源：3-6 自由编程

不停奔跑的小恐龙

2019-10-12 23:12:19

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 songs
 */
@WebServlet("/songs")
public class songs extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#HttpServlet()
	 */
	public songs() {
		super();
		// TODO Auto-generated constructor stub
	}

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String t = request.getParameter("t");
		List list = new ArrayList();
		if (t != null && t.equals("pop")) {
			list.add("稻香");
			list.add("晴天");
			list.add("告白气球");
		} else if (t != null && t.equals("classic")) {
			list.add("千千厥歌");
			list.add("傻女");
			list.add("七友");
		} else if (t != null && t.equals("rock")) {
			list.add("一块红布");
			list.add("假行僧");
			list.add("新长征路上的摇滚");
		}
		response.setContentType("text/html;charset=UTF-8");
		String json=JSON.toJSONString(list);
		response.getWriter().println(json);
	}

}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>
	<input type="button" value="流行歌曲" name="song">
	<input type="button" value="经典歌曲" name="song">
	<input type="button" value="摇滚歌曲" name="song">
	<div id="container"></div>
	<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
	<script type="text/javascript">
		var input = document.getElementsByName("song");
		//创建数组放入歌曲列表
		const list=[{"0":"pop"},{"1":"classic"},{"2":"rock"}];
		for (var i = 0; i < input.length; i++) {
			//设置参数标记
			input[i].setAttribute("index", i);
			input[i].onclick = function() {
				var idx=this.getAttribute("index");
				$(function() {											 					
							$.ajax({
								"url" : "/ajax/songs",
								"type" : "get",
								//取出歌曲类型
								"data" : "t=list[idx]",
								"dataType" : "text",
								"success" : function(json) {
								$("#container").append(
												"<h1>" + json + "</h1>");
									
								}
							})
				})
			}
		}
	</script>
</body>
</html>

写回答

1回答

好帮手慕柯南

2019-10-13

同学你好，

首先同学的list[idx]是一个对象，因此不应该包含在双引号中，应该使用拼接的方式，修改后的代码：
同学通过list[idx]这样的方式是获取不到相应的值的，我们来看一下list的值，可以看到list[0]其实是一个对象{0，”pop“},其它类似
建议同学将list修改为以下样子：
建议同学在最后添加数据时，将之前的清空一下，否则一直点击，数据会一直堆加，同事修改一个json的显示格式
修改后的参考代码，修改的代码老师在后面添加注释了同学注意查看：