老师帮忙看下，为什么点击按钮只显示单个数据

来源：2-8 自由编程

z晓龙

2019-07-25 16:28:15

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.btn{
	width:33%;
}
.div1{
	text-align: center;
}

</style>
</head>
<body>
	<input id="emp" class="btn" type="button" value="员工列表" />
	<input id="job" class="btn" type="button" value="职位列表" />
	<input id="department" class="btn" type="button" value="部门列表" />
	<div id="container" class="div1"></div>
	<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
	<script type="text/javascript">
		// 1.创建HttpRequest对象
		var xmlhttp;
		if(window.XMLHttpRequest){
			xmlhttp = new XMLHttpRequest();
		}else{
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		// 2.发送Ajax请求
		xmlhttp.open("GET" , "/ajax/employee" , true);
		xmlhttp.send();
		// 3.处理服务器响应
		document.onreadystatechange = function(){
			if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
				var text = xmlhttp.responseText;
				console.log(text);
				var json = JSON.parse(text);
				console.log(json);
				var html = "";
				for(var i=0;i<json.length;i++){
					var news = json[i];
					$("#emp").click(function(){
						$(".div1").html(html + "<p>" + news.emp + "</p>");
					})
					$("#job").click(function(){
						$(".div1").html(html + "<p>" + news.job + "</p>");
						
					})
					$("#department").click(function(){
						$(".div1").html(html + "<p>" + news.department + "</p>");
					})
				}
				document.getElementById("container").innerHTML = html;
			}
		}
		
		
	</script>
</body>
</html>

写回答

2回答

好帮手慕阿莹

2019-07-26

已采纳

1、首先，应该每次按按钮请求一次，而同学之前的是刷新一下，请求一次，按钮不管用。

于是，老师把同学的代码做了如下修改，并且，同学之前的html应该是作为字符串拼起来的哦：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.btn{
    width:33%;
}
.div1{
    text-align: center;
}
 
</style>
</head>
<body>
    <input id="emp" class="btn" type="button" value="员工列表" />
    <input id="job" class="btn" type="button" value="职位列表" />
    <input id="department" class="btn" type="button" value="部门列表" />
    <div id="container" class="div1"></div>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        // 1.创建HttpRequest对象
          $("#emp").click(function(){
        var xmlhttp;
        if(window.XMLHttpRequest){
            xmlhttp = new XMLHttpRequest();
        }else{
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        // 2.发送Ajax请求
        xmlhttp.open("GET" , "/test04/employee" , true);
        xmlhttp.send();
        // 3.处理服务器响应
              
        xmlhttp.onreadystatechange = function(){
        	
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                var text = xmlhttp.responseText;
                console.log(text);
                var json = JSON.parse(text);              
                var html = "";
                for(var i=0;i<json.length;i++){
                    var news = json[i];
                      html += ("<p>" + news.emp + "</p>");
                }
                document.getElementById("container").innerHTML = html;
            }
        }
         
          })
             $("#job").click(function(){ 
            	 var xmlhttp;
                 if(window.XMLHttpRequest){
                     xmlhttp = new XMLHttpRequest();
                 }else{
                     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                 }
                 // 2.发送Ajax请求
                 xmlhttp.open("GET" , "/test04/employee" , true);
                 xmlhttp.send();
                 // 3.处理服务器响应
                       
                 xmlhttp.onreadystatechange = function(){
                 	
                     if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                         var text = xmlhttp.responseText;
                      
                         var json = JSON.parse(text);              
                         var html = "";
                         for(var i=0;i<json.length;i++){
                             var news = json[i];
                               html += ("<p>" + news.job + "</p>");
                         }
                        
                         document.getElementById("container").innerHTML = html;
                     }
            	
                 }
                
             })
               $("#department").click(function(){   
            	   var xmlhttp;
                   if(window.XMLHttpRequest){
                       xmlhttp = new XMLHttpRequest();
                   }else{
                       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                   }
                   // 2.发送Ajax请求
                   xmlhttp.open("GET" , "/test04/employee" , true);
                   xmlhttp.send();
                   // 3.处理服务器响应
                         
                   xmlhttp.onreadystatechange = function(){
                   	
                       if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                           var text = xmlhttp.responseText;
                       
                           var json = JSON.parse(text);              
                           var html = "";
                         
                           for(var i=0;i<json.length;i++){
                               var news = json[i];
                               alert
                                 html += ("<p>" + news.department + "</p>");
                           }
                          
                           document.getElementById("container").innerHTML = html;
                       }
              	
               }
               })
    </script>
</body>
</html>

2、建议同学以后贴代码可以贴在我要回答中，不然代码会失去格式哟。

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

h晓龙

h 谢谢老师，已解决

h019-07-26

共1条回复

好帮手慕柯南

2019-07-25

同学你好！同学这样写可以出来数据吗？如果可以同学将for循环去掉，按以下方式书写测试一下：

如果不能够解决，建议同学将servlet的代码也贴一下。

如果我的回答解决了你的疑惑，请采纳，祝学习愉快~

h晓龙

h 老师，按此方法不行，之前可以出来数据，但是只显示一条数据，Servlet代码如下 package com.imooc.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 EmployeeServlet */ @WebServlet("/employee") public class EmployeeServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public EmployeeServlet() { 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 Employee("James" , "SG" , "HOU")); list.add(new Employee("Steven" , "" , "GSW")); list.add(new Employee("LBJ" , "SF" , "LA")); String json = JSON.toJSONString(list); System.out.println(json); response.getWriter().println(json); } }

h019-07-25

共1条回复

0 学习 · 10204 问题

查看课程

相似问题

老师看看，点击按钮无响应

回答 1

老师帮忙看一下，为什么后台返回的数据为空

回答 1

一级二级内容放在一个chList里为什么在页面中第二级菜单加载时，没有显示chList的全部元素

回答 1

老师，点击第一个按钮获取不到json数据是怎么回事

回答 1

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