怎么在点击按钮之后把显示内容的div清屏呢

来源：2-8 自由编程

weixin_慕无忌837323

2019-09-04 16:58:54

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div style="width: 90%; margin: 0 auto;">
		<input type="button" id="btnName" value="姓名" style="width: 30%">
		<input type="button" id="btnJob" value="职位" style="width: 30%">
		<input type="button" id="btnDpt" value="部门" style="width: 30%">
	</div>
	<div id="infoContent"></div>

	<script type="text/javascript">
		//1创建XmlHttpRequest
		var xmlhttp;
		if (window.XMLHttpRequest) {
			xmlhttp = new XMLHttpRequest();
		} else {
			xmlhttp = new ActiveXObject("Microsoft.XMLHttp");
		}
		//2发送Ajax请求
		xmlhttp.open("GET", "/ajax/emp", 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);
				console.log(json);
				var html = " ";
				var infoContent = document.getElementById("infoContent")
				document.getElementById("btnName").onclick = function() {
					infoContent.content="";
					alert(infoContent.content);
					infoContent.innerHTML="";
					for (var i = 0; i < json.length; i++) {
						var emp = json[i];
						html +="<p style='color:red;text-align:center'>"+ emp.name + "</p>";
						infoContent.innerHTML = html;

					}
					

				}
				document.getElementById("btnJob").onclick = function() {
					infoContent.innerHTML="";
					for (var i = 0; i < json.length; i++) {
						var emp = json[i];
						html += "<p style='color:red;text-align:center'>"+ emp.job + "</p>";
						infoContent.innerHTML = html;

					}
					

				}
				document.getElementById("btnDpt").onclick = function() {
					infoContent.value=0;
					infoContent.innerHTML="";
					for (var i = 0; i < json.length; i++) {
						var emp = json[i];
						html +=  "<p style='color:red;text-align:center'>"+ emp.department + "</p>";
						infoContent.innerHTML = html;

					}
					

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

package com.zw.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 EmployeeServlet
 */
@WebServlet("/emp")
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("sunsan", "经理", "人事部"));
		list.add(new Employee("jorge", "工程师", "研发部"));
		list.add(new Employee("bob", "工程师", "研发部"));
		String json=JSON.toJSONString(list);
		response.setContentType("text/html;charset=UTF-8");
		response.getWriter().println(json);
	}



}

package com.zw.ajax;

public class Employee {
	private String name;
	private String job;
	private String department;
	public Employee()
	{
		
	}
	public Employee(String name,String job,String department)
	{
		this.department=department;
		this.job=job;
		this.name=name;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getJob() {
		return job;
	}
	public void setJob(String job) {
		this.job = job;
	}
	public String getDepartment() {
		return department;
	}
	public void setDepartment(String department) {
		this.department = department;
	}
	

}

写回答

1回答