打卡

来源：2-8 自由编程

home_11

2021-05-18 10:51:28

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

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String name = request.getParameter("name");
		List<String> list = new ArrayList<>();
		if("emp".equals(name)) {
			list.add("小红");
			list.add("小明");
			list.add("小白");
		} else if("pos".equals(name)){
			list.add("职员");
			list.add("经理");
		} else if("dep".equals(name)){
			list.add("人事部");
			list.add("技术部");
			list.add("无线事业部");
		}
		String json = JSON.toJSONString(list);
		response.setContentType("text/html;charset=utf-8");
		response.getWriter().println(json);
	}

}

<!DOCTYPE html >

<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ajax练习</title>

<style type="text/css">
.div1 {
	
}

.ul1 {
	
}

.ul2 {
	
}
</style>


</head>
<body>
	<div class="div1">
		<ul class="ul1">
			<li><button id="emp" value="emp">员工列表</button></li>
			<li><button id="pos" value="pos">职位列表</button></li>
			<li><button id="dep" value="dep">部门列表</button></li>
		</ul>
	</div>
	<div class="div2">
		<ul class="ul2">
			
		</ul>
	</div>
	<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		function refresh(name) {
			//1. 创建XmlHttpRequest
			var xmlhttp;
			if(window.XMLHttpRequest){
				xmlhttp = new XMLHttpRequest();
			}else{
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			//2. 发送Ajax请求
			//true 代表异步执行  false代表同步执行
			xmlhttp.open("GET" , "/ajax/list?name=" + name , true);
			xmlhttp.send();
			console.log("请求发送完成");
			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++){
						html = html + "<li>" + json[i] + "</li>"; 
					}
					$("ul.ul2").html(html);
				}
			}			
		}
	
		$("button").click(function(event) {
			// 获取被点击按钮的id
			refresh(event.target.id);
		});
		
	</script>
</body>
</html>