老师,麻烦看看哪错了,点击各按钮报错

来源:3-6 自由编程

qq_cookies_oqrHNO

2019-04-09 17:21:28

http://img.mukewang.com/climg/5cac63e80001bb5007100919.jpg

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

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        List plist=new ArrayList();
        List clist=new ArrayList();
        List rlist=new ArrayList();
        plist.add("稻香");
        plist.add("晴天");
        plist.add("告白气球");
        clist.add("傻女");
        clist.add("七友");
        clist.add("千千阙歌");
        rlist.add("一块红布");
        rlist.add("假行僧");
        rlist.add("新长征路上的摇滚");
        String jsonp=JSON.toJSONString(plist);
        String jsonc=JSON.toJSONString(clist);
        String jsonr=JSON.toJSONString(rlist);
        response.setContentType("text/html;charset=UTF-8");
        if(request.getParameter("id").equals("p")) {
             response.getWriter().println(jsonp);
        }
        if(request.getParameter("id").equals("c")) {
             response.getWriter().println(jsonc);
        }
        if(request.getParameter("id").equals("r")) {
             response.getWriter().println(jsonr);
        }
    }

}


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table width="100%">
        <tr>
            <td width="33%"><button id="p" style="width:100%;">流行歌曲</button></td>
            <td width="33%"><button id="c" style="width:100%;" >经典歌曲</button></td>
            <td width="33%"><button id="r" style="width:100%;">摇滚歌曲</button></td>
        </tr>
    </table>
<div id="content" style="text-align: center;"></div>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
//1.创建ajax对象
var xmlhttp;
if(window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
}else{
    xmlhttp=new ActiveObject("Microsoft.XMLHTTP");
}
$("#p,#c,#r").click(function(){
     var url = "/ajax_practice/content2?id=" + this.id;
    //2.发送ajax请求
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
    //3.处理服务器响应
    xmlhttp.onreadystatechange=function(){
        if(xmlhttp.readyState==4 && xmlhttp.status==200){
            var t=xmlhttp.responseText;
            var json=JSON.parse(t);
            var html="";
            for(var i=0;i<json.length;i++){
                html="<div>"+html+json[i]+"</div>";
                
            }
            document.getElementById("content2").innerHTML=html;
        }
    }
});
</script>
</body>
</html>

写回答

1回答

芝芝兰兰

2019-04-09

同学你好。已经在http://class.imooc.com/course/qadetail/106421中回复你了哦。还请同学不要重复提相同的问题呢~祝学习愉快~

0

0 学习 · 10204 问题

查看课程