为什么点击之后会是undefine
来源：2-8 自由编程
慕标0359786
2020-03-24 17:32:05
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 exeServlet
*/
@WebServlet("/exe")
public class exeServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public exeServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<Employee> list=new ArrayList<>();
list.add(new Employee("小红","职员","人事部"));
list.add(new Employee("小明","经理","技术部"));
list.add(new Employee("小白"," 。。。","无线事业部"));
String json=JSON.toJSONString(list);
System.out.println(json);
response.setContentType("text/html;charset=utf-8");
response.getWriter().print(json);
}
}package com.imooc.ajax;
public class Employee {
private String name;
private String job;
private String department;
public Employee(String name, String job, String department) {
super();
this.name = name;
this.job = job;
this.department = department;
}
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;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input id="btnEmp" type="button" value="员工列表" >
<input type="button" value="职员列表" id="b">
<input type="button" value="部门列表" id="c">
<div id="divContent"></div>
<script type="text/javascript">
//创建XmlHttpRequest对象
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//发送ajax请求
xmlhttp.open("GET","/ajax/exe",true);
xmlhttp.send();
//处理服务器响应
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
//获取响应体的文本
var t=xmlhttp.responseText;
//把响应结果进行显示在浏览器中
var json=JSON.parse(t);
var html1="";
for(var i=0;i<json.length;i++){
var emp = json[i];
html1=html1+"<h1>"+emp.name+"</h1>";
}
}
document.getElementById("btnEmp").onclick=function(){
document.getElementById("divContent").innerHTML=html1;
}
</script>
</body>
</html>写回答
1回答
-
好帮手慕小尤
2020-03-24
同学你好，1. 并未进入if(xmlhttp.readyState == 4 && xmlhttp.status == 200)中，未创建html1变量，则输出html1变量自然是undefine（为定义的）
2. 建议同学在if结构外定义html1变量，并在if结构外添加xmlhttp.onreadystatechange = function()处理服务器响应。修改后代码如下所示：
var xmlhttp; var html1=""; if(window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); }else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } //发送ajax请求 xmlhttp.open("GET","/ajax/exe",true); xmlhttp.send(); //处理服务器响应 xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ //获取响应体的文本 var t=xmlhttp.responseText; //把响应结果进行显示在浏览器中 var json=JSON.parse(t); for(var i=0;i<json.length;i++){ var emp = json[i]; html1=html1+"<h1>"+emp.name+"</h1>"; } } } document.getElementById("btnEmp").onclick=function(){ document.getElementById("divContent").innerHTML=html1; }如果我的回答解决了你的疑惑，请采纳，祝学习愉快~
0
相似问题