2-8自由编程

你好老师，我的按钮显示的是这样的。没有真实结果出现，怎么么回事啊？谢谢

package com.wei.ajaxl; 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; import com.wei.ajax.New; /** * Servlet implementation class ShowServlet */ @WebServlet("/show") public class ShowServlet extends HttpServlet {  private static final long serialVersionUID = 1L;  /** * @see HttpServlet#HttpServlet() */  public ShowServlet() {  super(); 

// TODO Auto-generated constructor stub<br>    }<br><br>   /**<br>  * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)<br>  */<br> protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {<br><br>       List list=new ArrayList();<br>      List list1=new ArrayList();<br>     List list2=new ArrayList();<br>     List list4=new ArrayList();<br>     list.add(new Employee("小红"));<br>       list.add(new Employee("小明"));<br>       list.add(new Employee("小白"));<br><br>       list1.add(new Job("职员") );<br>      list1.add(new Job("经理") );<br><br>      list2.add(new Apartment("人事部"));<br>        list2.add(new Apartment("技术部"));<br>        list2.add(new Apartment("无线事业部"));<br><br>      list4.add(list);<br>        list4.add(list1);<br>       list4.add(list2);<br><br><br>       String json= JSON.toJSONString(list4);<br>      response.setContentType("text/html;charset=UTF-8");<br>     response.getWriter().println(json);<br><br> }<br><br>}<br>

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <input type="button" name="employee1" id="employee" value="员工列表"> <input type="button" name="job1" id="job" value="职位列表"> <input type="button" name="depar1" id="depar" value="部门列表"> <div id="showDiv1"> </div> <script> //1.创建xmlhttprequest document.getElementById("employee").onclick = function() { var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET", "/FirstServlett/show", true); xmlhttp.send(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var j = xmlhttp.responseText; console.log(j); var json = JSON.parse(j); var n=json[0]; document.getElementById("showDiv1").innerHTML = n; } } } document.getElementById("job").onclick = function() { var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET", "/FirstServlett/show", true); xmlhttp.send(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var j = xmlhttp.responseText; console.log(j); var json = JSON.parse(j); var n = json[1]; document.getElementById("showDiv1").innerHTML = n; } } } //第三个div document.getElementById("depar").onclick = function() { var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET", "/FirstServlett/show", true); xmlhttp.send(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var j = xmlhttp.responseText; console.log(j); var json = JSON.parse(j); var n = json[2]; document.getElementById("showDiv1").innerHTML = n; } } } </script> </body> </html> 

魏榕汘 2021-04-13

源自：jQuery与Ajax入门 2-8 自由编程

收起

1回答

好帮手慕小脸 2021-04-13 16:02:07

同学你好，代码存在如下问题：

1、由于同学没有贴出实体类，这里猜测同学实体类代码没有实现序列化，建议将其补全

2、在html中需引入js文件，如下：

3、无需创建三个实体类对象，这里同学可以直接定义一个对象，里面包含三个属性即可，如:

Servlet类中代码简化如下：

4、展示数据这里应使用循环，不然得到的数据是有误的

其他同理

参考代码如下：

@WebServlet("/show") public class ShowServlet extends HttpServlet { private static final long serialVersionUID = 1L; public ShowServlet() { super(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { List<Employee> list = new ArrayList(); list.add(new Employee("小红","职员","人事部")); list.add(new Employee("小明","经理","技术部")); list.add(new Employee("小白","助理","无线事业部")); String json = JSON.toJSONString(list); response.setContentType("text/html;charset=UTF-8"); System.out.println(json); response.getWriter().println(json); } } 

document.getElementById("employee").onclick = function() { var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } console.log(xmlhttp); xmlhttp.open("GET", "/ajax/show", true); xmlhttp.send(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var j = xmlhttp.responseText; console.log(j); var json = JSON.parse(j); console.log(json); var html = ""; for (var i = 0; i < json.length; i++) { html = html +json[i].emp + " "; } document.getElementById("showDiv1").innerHTML = html; } } } 

祝学习愉快~

收起回答