页面就绪函数必须要使用吗？我的代码没使用好像效果也出来了，老师帮忙给看下有没有问题

来源：3-6 自由编程

Adopat

2019-07-28 15:17:07

package com.imooc.ajax.practice;

public class Music {
	private String popName;
	private String classicName;
	private String rockName;

	public Music() {

	}

	public Music(String popName, String classicName, String rockName) {
		super();
		this.popName = popName;
		this.classicName = classicName;
		this.rockName = rockName;
	}

	public String getPopName() {
		return popName;
	}

	public void setPopName(String popName) {
		this.popName = popName;
	}

	public String getClassicName() {
		return classicName;
	}

	public void setClassicName(String classicName) {
		this.classicName = classicName;
	}

	public String getRockName() {
		return rockName;
	}

	public void setRockName(String rockName) {
		this.rockName = rockName;
	}

}
package com.imooc.ajax.practice;

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 MusicServlet
 */
@WebServlet("/music_list")
public class MusicServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public MusicServlet() {
        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 Music("稻香","千千阙歌","一块红布"));
		list.add(new Music("晴天","傻女","假行僧"));
		list.add(new Music("告白气球","七友","新长征路上的摇滚"));
		String json = JSON.toJSONString(list);
		System.out.println(json);
		response.setContentType("text/html;charset=UTF-8");
		response.getWriter().println(json);
	
	
	}

}
<%@ 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>
</head>
<body>
<div>
	<input id="btnLoad" type="button" value="流行歌曲" /><input id="btnLoad1" type="button" value="经典歌曲" /><input id="btnLoad2" type="button" value="摇滚歌曲" />
	<div id="container"></div>
</div>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$("#btnLoad").click(function(){
	$.ajax({
		"url" : "/ajax/music_list",
		"type" : "get",
		"dataType" : "json",
		"success" : function(json){
			console.log(json);
			$("#container>h1").remove();
			for(var i=0;i<json.length;i++){
				$("#container").append("<h1>"+json[i].popName+"</h1>");
			}
		},
		"error" : function(xmlhttp ,errorText){
			console.log(xmlhttp);
			console.log(errorText);
			if(xmlhttp.status =="405"){
				alert("无效的请求方式");
			}else if(xmlhttp.status =="400"){
				alert("未找到URL资源");
			}else if(xmlhttp.status =="500"){
				alert("服务器内部错误，请联系管理员");
			}else{
				alert("产生异常，请联系管理员");
			}
		}
	})
})
$("#btnLoad1").click(function(){
	$.ajax({
		"url" : "/ajax/music_list",
		"type" : "get",
		"dataType" : "json",
		"success" : function(json){
			console.log(json);
			$("#container>h1").remove();
			for(var i=0;i<json.length;i++){
				$("#container").append("<h1>"+json[i].classicName+"</h1>");
			}
		},
		"error" : function(xmlhttp ,errorText){
			console.log(xmlhttp);
			console.log(errorText);
			if(xmlhttp.status =="405"){
				alert("无效的请求方式");
			}else if(xmlhttp.status =="400"){
				alert("未找到URL资源");
			}else if(xmlhttp.status =="500"){
				alert("服务器内部错误，请联系管理员");
			}else{
				alert("产生异常，请联系管理员");
			}
		}
	})
})
$("#btnLoad2").click(function(){
	$.ajax({
		"url" : "/ajax/music_list",
		"type" : "get",
		"dataType" : "json",
		"success" : function(json){
			console.log(json);
			$("#container>h1").remove();
			for(var i=0;i<json.length;i++){
				$("#container").append("<h1>"+json[i].rockName+"</h1>");
			}
		},
		"error" : function(xmlhttp ,errorText){
			console.log(xmlhttp);
			console.log(errorText);
			if(xmlhttp.status =="405"){
				alert("无效的请求方式");
			}else if(xmlhttp.status =="400"){
				alert("未找到URL资源");
			}else if(xmlhttp.status =="500"){
				alert("服务器内部错误，请联系管理员");
			}else{
				alert("产生异常，请联系管理员");
			}
		}
	})
})

</script>
</body>
</html>

写回答

1回答