请老师看一下代码，并回答一个问题

来源：3-6 自由编程

96年的nash

2019-04-16 20:18:24

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

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		List<String> list1 = new ArrayList<String>();
		list1.add("稻香");
		list1.add("晴天");
		list1.add("告白气球");
		List<String> list2 = new ArrayList<String>();
		list2.add("千千阙歌");
		list2.add("傻女");
		list2.add("七友");
		List<String> list3 = new ArrayList<String>();
		list3.add("一块红布");
		list3.add("假行僧");
		list3.add("新长征路上的摇滚");
		
		String json1 = JSON.toJSONString(list1);
		String json2 = JSON.toJSONString(list2);
		String json3 = JSON.toJSONString(list3);
		
		response.setContentType("text/html;charset=UTF-8");
		String parm = request.getParameter("id");
		if(parm.equals("popularMusic")) {
			System.out.println(json1);
			response.getWriter().println(json1);
		}else if(parm.equals("classicMusic")){
			System.out.println(json2);
			response.getWriter().println(json2);
		}else if (parm.equals("rockMusic")) {
			System.out.println(json3);
			response.getWriter().println(json3);
		}
	}

}

<%@ 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>
<style>
    *{
        margin: 0px;
        padding:0px;
    }
    #buttonText{
        width:100%;
        text-align: center;
        margin: 30px;
        margin-bottom: 0px;
        margin-left: 0px;
    }
    
    input{
      width: 30%;
      margin-left: 20px;
      margin-right:20px;
    }
    
    #content{
       height: 100px;
       text-align: center;
    }
    
</style>
<body>
    <div id="buttonText">
        <input type="button" value="流行歌曲" id="popularMusic">
        <input type="button" value="经典歌曲" id="classicMusic">
        <input type="button" value="摇滚歌曲" id="rockMusic">
    </div>
    <div id="content">
    </div>
    
    <script type="text/javascript" src=js/jquery-3.3.1.js></script>
    <script type="text/javascript">
        alert("你好你好")
        //1、创建XMLRequest
        var xmlhttp;
        var url;
        if(window.XMLHttpRequest){
        	xmlhttp = new XMLHttpRequest();       	
        }else{
        	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2、发送Ajax
        $("#popularMusic,#classicMusic,#rockMusic").click(function(){
        	var url = "/ajax/music?id=" + this.id;
        	xmlhttp.open("GET",url,true);
            xmlhttp.send();
            alert("请求发送完成");
            xmlhttp.onreadystatechange=function(){
            	if(xmlhttp.readyState==4 && xmlhttp.status==200){
            		var text = xmlhttp.responseText;
  //          		alert(text);
            		console.log(text);
            		var json = JSON.parse(text);
  //          		alert(json);
            		console.log(json);
            		var html = "";
            		for(var i=0;i<json.length;i++){
            			html = html + "<div>" + json[i] + "</div>";
            		}
            		document.getElementById("content").innerHTML = html;
            		
            	}
            }
        })
        
    </script>
</body>
</html>

response.getWriter().println();

上面这句必须加吗？具体的意义能讲一下吗？

写回答

2回答

芝芝兰兰

2019-04-17

已采纳

同学你好。你写的新代码我也看到了呢~其实 $.ajax 函数只是jQuery对XMLHttp（真正的Ajax技术）的封装，使之更加具有可读性，方便前端工程师。实际上对我们Java工程师而言，还是要深入理解xmlhttp的过程。

如果使用Ajax技术进行请求和响应， response.getWriter().println(); 写的内容存在了xmlhttp.responseText里。所以这句话添加与否，要看Servlet处理过后的数据，前端是否需要进一步处理，也即是 $.ajax 里的success或error等函数中是否需要dataType转换成的数据。在这里就是"success":function(json)里的json。

真正的Ajax技术，其执行顺序是，在触发js事件，创建一个HttpRequest对象，执行到xmlhttp.send()方法时，发送了HTTP请求，转移到Servlet的对应方法，这里设置了GET，就是到doGet方法中执行。当执行完代码逻辑的最后一句的时候，也就是response.getWriter().println(); 后response返回，这时触发xmlhttp.onreadystatechange = function()，执行其中的代码。

如果解答了同学的疑问，望采纳~

祝学习愉快~

96年的nash

提问者

2019-04-16

晕，做错了，没看到要用ajax函数做，重新做了一遍，请老师过目

<%@ 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>
<style>
*{
        margin: 0px;
        padding:0px;
    }
    #buttonText{
        width:100%;
        text-align: center;
        margin: 30px;
        margin-bottom: 0px;
        margin-left: 0px;
    }
    
    input{
      width: 30%;
      margin-left: 20px;
      margin-right:20px;
    }
    
    #content{
       height: 100px;
       text-align: center;
       font-weight: border;
    }
</style>   
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
    //页面加载完后执行function里面的代码
    $(function(){
    	//ajax核心方法，需要传入JSON对象，来设置
    	$("#popularMusic,#classicMusic,#rockMusic").click(function(){
    	    var id = this.id;
    	    var url = "/ajax/music?id=" + id;
    	    id = "id="+id;
    		$.ajax({
    		"url":url,
    		"type":"get",
    		"data":id,
    		"dataType":"json",
    		"success":function(json){
    			console.log(json);
    			var html="";
    			for(var i=0;i<json.length;i++){
        			html = html + "<div>" + json[i] + "</div>";
        		}
        		document.getElementById("content").innerHTML = html;
    		},
    		"error":function(xmlhttp,errorText){
    			console.log(xmlhttp);
    			if(xmlhttp.status==405){
    				alert("无效的请求");
    			}else if(xmlhttp.status==404){
    				alert("未找到URL资源");
    			}else if(xmlhttp.status==500){
    				alert("服务器内部错误，请联系管理员");
    			}else{
		    		alert("错误，请联系管理员");
		    	}
    		}
    	})
    })
    })
</script>

<body>
    <div id="buttonText">
        <input type="button" value="流行歌曲" id="popularMusic">
        <input type="button" value="经典歌曲" id="classicMusic">
        <input type="button" value="摇滚歌曲" id="rockMusic">
    </div>
    <div id="content">
    </div>
</body>
</html>

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

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		List<String> list1 = new ArrayList<String>();
		list1.add("稻香");
		list1.add("晴天");
		list1.add("告白气球");
		List<String> list2 = new ArrayList<String>();
		list2.add("千千阙歌");
		list2.add("傻女");
		list2.add("七友");
		List<String> list3 = new ArrayList<String>();
		list3.add("一块红布");
		list3.add("假行僧");
		list3.add("新长征路上的摇滚");
		
		String json1 = JSON.toJSONString(list1);
		String json2 = JSON.toJSONString(list2);
		String json3 = JSON.toJSONString(list3);
		
		response.setContentType("text/html;charset=UTF-8");
		String parm = request.getParameter("id");
		if(parm.equals("popularMusic")) {
			System.out.println(json1);
			response.getWriter().println(json1);
		}else if(parm.equals("classicMusic")){
			System.out.println(json2);
			response.getWriter().println(json2);
		}else if (parm.equals("rockMusic")) {
			System.out.println(json3);
			response.getWriter().println(json3);
		}
	}

}

0 学习 · 10204 问题

查看课程

相似问题

请老师看一下代码并回答几个问题

回答 1

老师，请看看这是什么错误，怎么也解决不了？

回答 1

请老师看一下，并回答一个问题

回答 2

老师，我在这个代码里面，引用jQuery，结果报错了，请老师帮我看下为什么会出错

回答 1

老师，请帮我看一下代码错误怎么解决？下面是错误信息？

回答 1

打开慕课网App查看更多内容