交作业。。

首页课程实战体系课手记专栏慕课教程

交作业。。

来源：3-6 自由编程

电磁护盾

2020-02-24 12:15:48

是把三组数据都放入放到服务器端servlet的list集合中，然后在客户端jsp中用if判断要显示哪组数据的效率高？

还是根据客户端jsp的设置的请求参数"data":" ",在服务器端servlet中用if判断来决定把哪一组数据装入list集合的效率高？

Music.java

package com.imooc.ajax;

public class Music {
    private String[] pop;
    private String[] classic;
    private String[] rock;
	public Music() {

	}
	public Music(String[] pop, String[] classic, String[] rock) {
		super();
		this.pop = pop;
		this.classic = classic;
		this.rock = rock;
	}
	public String[] getPop() {
		return pop;
	}
	public void setPop(String[] pop) {
		this.pop = pop;
	}
	public String[] getClassic() {
		return classic;
	}
	public void setClassic(String[] classic) {
		this.classic = classic;
	}
	public String[] getRock() {
		return rock;
	}
	public void setRock(String[] rock) {
		this.rock = rock;
	}
    
}

MusicListServlet.java

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 MusicListServlet
 */
@WebServlet("/music_list")
public class MusicListServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public MusicListServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		List<Music> list=new ArrayList<>();		
		String[] pop=new String[] {"稻香","晴天","告白气球"};
		String[] classic=new String[] {"千千阙歌","傻女","七友"};
		String[] rock=new String[] {"一块红布","假行僧","新长征路上的摇滚"};
		Music music=new Music(pop,classic,rock);
		list.add(music);
		String json=JSON.toJSONString(list);
//		System.out.println(json);
	    response.setContentType("text/html;charset=UTF-8");
	    //利用这样的方式从服务器返回一个标准的字符串
	    //将这个json向客户端进行输出（将json返回给浏览器）
	    //表示将获取的json数据，返回给ajax调用处(open和send处)，进行处理服务器响应。
	    response.getWriter().println(json);
	}

}

jquery_musicList.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
* {
	padding: 0px;
	margin: 0px;
}

.button {
	/*  border: 1.5px solid blue;  */
	height: 22px;
	width: auto;
	position: relative;
}

.button ul {
	/* border: 1px solid red; */
	top: 10px;
	height: 50px;
	width: 1200px;
	position: relative;
	margin: 0px auto;
}

.button ul li {
	/* border: 1px solid green; */
	position: relative;
	/* top:-10px; */
	list-style: none;
	float: left;
	width: 33.2%;
	margin-left: 1px;
}

.button li input {
	width: 100%;
	/* padding:0px 1px; */
}

#content {
	/* border: 1.5px solid orange;  */
	top: 10px;
	height: 100px;
	width: 300px;
	position: relative;
	margin: 0px auto;
	text-align: center;
	line-height: 50px;
}

#content h1 {
	position: relative;
	/* color:red; */
	margin: 0px 0px 15px 0px;
	top: 20px;
}
</style>
</head>
<body>
	<div class="button" id="button">
		<ul>
			<li><input id="pop" class="input1" type="button" value="流行歌曲"></li>
			<li><input id="classic" class="input2" type="button" value="经典歌曲"></li>
			<li><input id="department" class="input3" type="button" value="摇滚歌曲"></li>
		</ul>
	</div>
	<div id="content"></div>
	<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
	<script type="text/javascript">
	    //document.getElementById("employee").onclick=function(){
        var btn=document.getElementsByTagName("input");
        for(var i=0;i<btn.length;i++){
        	btn[i].setAttribute("index",i);
        	btn[i].onclick=function(){
        		var idx=this.getAttribute("index");
        		$.ajax({
            	    "url":"/ajax/music_list",
            	    "type":"get",
            	    "dataType":"json", 
            	    "success":function(json){
            	       	var html="";
            	       	if(idx==0){
        		       	    for(var z=0;z<json[0].pop.length;z++){
        		       	        html=html+"<h1>"+json[0].pop[z]+"</h1>";
        		       	        document.getElementById("content").innerHTML=html;
        		       		}
            	       	}
            	       	if(idx==1){
        		       	    for(var z=0;z<json[0].classic.length;z++){
        		       	        html=html+"<h1>"+json[0].classic[z]+"</h1>";
        		       	        document.getElementById("content").innerHTML=html;
        		       		}
            	       	}
            	       	if(idx==2){
        		       	    for(var z=0;z<json[0].rock.length;z++){
        		       	        html=html+"<h1>"+json[0].rock[z]+"</h1>";
        		       	        document.getElementById("content").innerHTML=html;
        		       		}
            	       	}
                    },
                })
            }
        }     
    </script>
</body>
</html>

写回答

1回答