定义全局变量json,再调用getServerJson()函数给json赋值后，打印不出所赋的值？
来源：2-8 自由编程
棉花糖阿水
2019-09-17 20:29:25
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>职员列表</title>
<style>
td{
width: 400px;
text-align: center;
margin: 0;
padding: 0px;
background-color: #cfcfcf;
}
td:hover{
border-color: red;
}
.list{
}
</style>
</head>
<body>
<table class="list" align="center" border="1" >
<tr>
<td id="c1">员工列表
</td>
<td id="c2">职位列表</td>
<td id="c3">部门列表</td>
</tr>
</table>
<div id="info"></div>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
//定义一个全局变量用来接收JSON数据
var json;
//获取服务器响应的文本
function getServerJson() {
//创建XmlHttpRequest对象
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
else{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
console.log(xmlHttp);
//创建Ajax请求
xmlHttp.open("GET","/ajax/company",true);
//发送到服务器
xmlHttp.send();
//处理服务器响应
xmlHttp.onreadystatechange=function(){
//响应已被接收并且服务器处理成功时才执行
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
//获取响应体的文本
var responseText = xmlHttp.responseText;
//对服务器结果进行处理
console.log(responseText);
json = JSON.parse(responseText);
console.log(json);
}
}
}
console.log("json=" + json);
$("td[id='c1']").on("click",function(){
getServerJson();
console.log(json);
var html = "";
for (var i = 0; i < json.length; i++) {
var employee = json[i];
html= employee.name + "<br>"
}
document.getElementById("info").innerHTML = html;
});
</script>
</body>
</html>package com.imooc.ajax;
public class Employee {
private String name;
private String department;
private String job;
public Employee(String name, String department, String job) {
this.name = name;
this.department = department;
this.job = job;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getDepartment() {
return department;
}
public void setDepartment(String department) {
this.department = department;
}
public String getJob() {
return job;
}
public void setJob(String job) {
this.job = job;
}
}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 CompanyContent
*/
@WebServlet("/company")
public class CompanyContent extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public CompanyContent() {
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> emploList = new ArrayList<Employee>();
Employee e1 = new Employee("小红", "销售部", "职员");
Employee e2 = new Employee("小明", "研发部", "职员");
Employee e3 = new Employee("小强", "人事部", "经理");
emploList.add(e1);
emploList.add(e2);
emploList.add(e3);
String json = JSON.toJSONString(emploList);
System.out.println(json);
response.setContentType("text/html;charset=utf-8");
response.getWriter().println(json);
}
}
写回答
1回答
-
同学你好！
报错的原因是因为，同学在方法中调用了ajax的方法，由于被调用的方法是ajax，这里还没有等ajax执行完，getServerJson();后面的方法就开始执行了，因此json为没有定义。同学第二次点击时就正常了。另外将ajax改为同步，发现也是不可以的。因此不建议同学将ajax单独封装一个函数来进行调用。可以在点击事件中直接执行ajax方法。
同学在给html赋值时应该进行字符串的拼接，而不是直接使用=，这样会导致html的结果只有最后一次循环的值
如果过我的回答解决了你的疑惑，请采纳，祝学习愉快~
0
相似问题
弹不出json的值
回答 1