<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<style type="text/css">
*{
margin:20px 0;
padding:0 0;
}
input{
width:200px;
text-align:center;
}
.outside{
width:100%;
text-align:center;
}
#container{
/* width:100px;
height:100px; */
position:relative;
margin:0 auto;
/* background-color:orange; */
}
</style>
</head>
<body>
<div class="outside">
<input type="button" id="ebtn" value="员工列表" />
<input type="button" id="rbtn" value="职位列表" />
<input type="button" id="dbtn" value="部门列表" />
<div id="container"></div>
</div>
<script type="text/javascript">
//员工列表
document.getElementById("ebtn").onclick=function(){
//1.生成xmlhttp对象
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActivXObject("Microsoft.XMLHTTP");
}
//2.发送ajax请求
xmlhttp.open("get","/ajax/p?param=1",true);
xmlhttp.send();
//3.处理数据
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
var t=xmlhttp.responseText;
var json=JSON.parse(t);
console.log(json);
var html="";
for(var i=0;i<json.length;i++){
var ename=json[i];
console.log(ename);
html=html+ename+"<br>";
}
console.log(html);
document.getElementById("container").innerHTML=html;
}
}
}
//职位列表
document.getElementById("rbtn").onclick=function(){
//1.生成xmlhttp对象
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActivXObject("Microsoft.XMLHTTP");
}
//2.发送ajax请求
xmlhttp.open("get","/ajax/p?param=2",true);
xmlhttp.send();
//3.处理数据
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
var t=xmlhttp.responseText;
var json=JSON.parse(t);
console.log(json);
var html="";
for(var i=0;i<json.length;i++){
var ename=json[i];
console.log(ename);
html=html+ename+"<br>";
}
console.log(html);
document.getElementById("container").innerHTML=html;
}
}
}
//部门列表
document.getElementById("dbtn").onclick=function(){
//1.生成xmlhttp对象
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActivXObject("Microsoft.XMLHTTP");
}
//2.发送ajax请求
xmlhttp.open("get","/ajax/p?param=3",true);
xmlhttp.send();
//3.处理数据
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
var t=xmlhttp.responseText;
var json=JSON.parse(t);
console.log(json);
var html="";
for(var i=0;i<json.length;i++){
var ename=json[i];
console.log(ename);
html=html+ename+"<br>";
}
console.log(html);
document.getElementById("container").innerHTML=html;
}
}
}
</script>
</body>
</html>
package com.zj.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;
import sun.management.counter.Variability;
/**
* Servlet implementation class process
*/
@WebServlet("/p")
public class process extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public process() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
@SuppressWarnings({ "unchecked", "rawtypes" })
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List list1 = new ArrayList();
list1.add("小红");
list1.add("小明");
list1.add("小白");
List list2 = new ArrayList();
list2.add("职员");
list2.add("经理");
List list3 = new ArrayList();
list3.add("人事部");
list3.add("技术部");
list3.add("无线事业部");
response.setContentType("text/html;charset=utf-8");
String param=request.getParameter("param");
int i=Integer.parseInt(param);
if (i == 1) {
String json1=JSON.toJSONString(list1);
response.getWriter().println(json1);
}else if (i == 2) {
String json2=JSON.toJSONString(list2);
response.getWriter().println(json2);
}else{
String json3=JSON.toJSONString(list3);
System.out.println(json3);
response.getWriter().println(json3);
}
}
}
文档结构
实现效果（点击不同按钮，显示不同内容）
网友评论