老师请检查
来源：2-8 自由编程
慕工程8205364
2021-01-11 17:16:49
<%@ page contentType="text/html;charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
input{
width:200px;
}
.div{
width:100%;
text-align:center;
}
#div{
height:100px;
}
</style>
</head>
<body>
<div class="div">
<input type="button" value="员工列表" id="yg1" name="yg">
<input type="button" value="职位列表" id="zw1" name="zw">
<input type="button" value="部门列表" id="bm1" name="bm">
<div id="div"></div>
</div>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
document.getElementById("yg1").onclick=function(){
//员工列表
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXOject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/Ajax/zy",true);
xmlhttp.send();
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
var t=xmlhttp.responseText;
var json=JSON.parse(t);
var html="";
for(var i=0;i<json.length;i++){
var j=json[i];
console.log(j.name);
html=html+j.name+"<br/>";
}
document.getElementById("div").innerHTML=html;
}
}
};
//职位列表
document.getElementById("zw1").onclick=function(){
var xmlhttp_zw;
if(window.XMLHttpRequest){
xmlhttp_zw=new XMLHttpRequest();
}else{
xmlhttp_zw=new ActiveXObject("Microsoft.XMLHTTP");
}
console.log(xmlhttp_zw);
xmlhttp_zw.open("GET","/Ajax/zy",true);
xmlhttp_zw.send();
xmlhttp_zw.onreadystatechange=function(){
if(xmlhttp_zw.readyState==4&&xmlhttp_zw.status==200){
var t=xmlhttp_zw.responseText;
var json=JSON.parse(t);
console.log(json);
var html="";
for(var i=0;i<json.length;i++){
if(i==2){
break;
}
var j=json[i];
html=html+j.zw+"<br>";
}
document.getElementById("div").innerHTML=html;
}
}
};
//部门列表
document.getElementById("bm1").onclick=function(){
var xmlhttp_bm;
if(window.XMLHttpRequest){
xmlhttp_bm=new XMLHttpRequest();
}else{
xmlhttp_bm=new ActiveXObject("Microsoft.XMLHTTP");
}
console.log(xmlhttp_bm);
xmlhttp_bm.open("GET","/Ajax/zy",true);
xmlhttp_bm.send();
console.log(xmlhttp_bm);
xmlhttp_bm.onreadystatechange=function(){
if(xmlhttp_bm.readyState==4&&xmlhttp_bm.status==200){
var t=xmlhttp_bm.responseText;
console.log(t);
var json=JSON.parse(t);
var html="";
for(var i=0;i<json.length;i++){
var j=json[i];
html=html+j.bm+"<br/>";
}
document.getElementById("div").innerHTML=html;
}
}
};
</script>
</body>
</html>
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 ZyServlet
*/
@WebServlet("/zy")
public class ZyServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public ZyServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<YuanGon> list = new ArrayList<>();
list.add(new YuanGon("小红","职员","人事部"));
list.add(new YuanGon("小明","经理","技术部"));
list.add(new YuanGon("小白","职员","无线事业部"));
String json=JSON.toJSONString(list);
response.setContentType("text/html;charset=UTF-8");
response.getWriter().println(json);
}
}
package com.imooc.ajax;
public class YuanGon {
private String name;
private String zw;
private String bm;
public YuanGon() {
}
public YuanGon(String name, String zw, String bm) {
super();
this.name = name;
this.zw = zw;
this.bm = bm;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getZw() {
return zw;
}
public void setZw(String zw) {
this.zw = zw;
}
public String getBm() {
return bm;
}
public void setBm(String bm) {
this.bm = bm;
}
}
1回答
-
好帮手慕小脸
2021-01-11
同学你好，已完成练习，棒棒哒！继续加油！
祝学习愉快！
0
相似问题