注意包的引入及其位置
pageEncoding="utf-8"%>
Insert title here
*{
margin:20px 0;
padding:0 0;
}
input{
width:200px;
text-align:center;
}
.outside{
width:100%;
text-align:center;
}
#container{
position:relative;
margin:0 auto;
}
//員工清單
document.getElementById("ebtn").οnclick=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
var ename=json[i];
console.log(ename);
html=html+ename+"
";
}
console.log(html);
document.getElementById("container").innerHTML=html;
}
}
}
//職位清單
document.getElementById("rbtn").οnclick=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
var ename=json[i];
console.log(ename);
html=html+ename+"
";
}
console.log(html);
document.getElementById("container").innerHTML=html;
}
}
}
//部門清單
document.getElementById("dbtn").οnclick=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
var ename=json[i];
console.log(ename);
html=html+ename+"
";
}
console.log(html);
document.getElementById("container").innerHTML=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;
@WebServlet("/p")
public class process extends HttpServlet {
private static final long serialVersionUID = 1L;
public process() {
super();
// TODO Auto-generated constructor stub
}
@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);
}
}
}
效果圖(點選不同按鈕，顯示不同内容)