老师帮忙看一下，为什么后台返回的数据为空
来源：2-8 自由编程
巴呆丶
2019-04-07 15:42:25
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#all {
width: 600px;
height: 50px;
background-color: #D0D0D0;
margin: auto;
}
.b {
width: 196px;
height: 50px;
margin: auto;
background-color: #F0F0F0;
font-size: 15px;
}
#list {
width: 600px;
height: 600px;
text-align: center;
font-size: 20px;
background-color: #F0F0F0;
margin: auto;
}
</style>
</head>
<body>
<div id="all">
<button class="b" id="emp" >员工列表</button>
<button class="b" id="depart" >部门列表</button>
<button class="b" id="postion" >职位列表</button>
</div>
<div id="list"></div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
var num;
$("button[id='emp']").click(function() {
num = "1";
});
$("button[id='postion']").click(function() {
num = "2";
});
$("button[id='depart']").click(function() {
num = "3";
});
$.ajax({
type : "get",
url : "/ajax/company",
data : "temp=num",
dataType : "json",
success : function(json) {
console.log(json);
for(var i = 0;i < json.length;i++) {
$("div[id='list']").append("<h3>" + json[i] + "</br></h3>");
}
}
});
});
</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 CompanyServlet
*/
@WebServlet("/company")
public class CompanyServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String temp = request.getParameter("temp");
List<String> list = new ArrayList<String>();
if (temp.equals("1")) {
list.add("小红");
list.add("小明");
list.add("小白");
}else if(temp.equals("2")) {
list.add("职员");
list.add("经理");
}else if (temp.equals("3")) {
list.add("人事部");
list.add("技术部");
list.add("无线事业部");
}
String json = JSON.toJSONString(list);
response.setContentType("text/html;charset=utf-8");
response.getWriter().println(json);
}
}写回答
1回答
-
同学你好。这是因为获取到的temp拿到的是“num”而不是num代表的数值：
data可以修改成"temp="+num这种形式拼接。
此外直接写在$(function(){ });中的代码都是刷新页面直接加载的。所以目前同学的代码逻辑是num直接定义完，还没来得及点击按钮触发给num赋值，就被ajax函数传入后台，所以只是修改data的拼接方式，获取到的只是undefined。
老师将同学的代码做了调整，同学可以再试一下看看：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> #all { width: 600px; height: 50px; background-color: #D0D0D0; margin: auto; } .b { width: 196px; height: 50px; margin: auto; background-color: #F0F0F0; font-size: 15px; } #list { width: 600px; height: 600px; text-align: center; font-size: 20px; background-color: #F0F0F0; margin: auto; } </style> </head> <body> <div id="all"> <button class="b" id="emp">员工列表</button> <button class="b" id="depart">部门列表</button> <button class="b" id="postion">职位列表</button> </div> <div id="list"></div> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> var num; $("button[id='emp']").click(function() { num = "1"; show(); }); $("button[id='postion']").click(function() { num = "2"; show(); }); $("button[id='depart']").click(function() { num = "3"; show(); }); function show(){$(function() { $.ajax({ type : "get", url : "/ajax/company", data : "temp="+num, dataType : "json", success : function(json) { console.log(json); for (var i = 0; i < json.length; i++) { $("div[id='list']").append( "<h3>" + json[i] + "</br></h3>"); } } }); }); } </script> </body> </html>如果还有疑问，可以继续提问。如果解答了同学的疑问，望采纳~
祝学习愉快~
0
相似问题