AJAX获取到数据后表格显示不出来
0
[已解决问题]
解决于 2020-05-10 15:43
控制层
@RequestMapping(value = "/list")
public void select(HttpServletResponse resp){
try {
/list集合中存放的是好多student对象/
List<User> students=userMapper.selectList(null);
/将list集合装换成json对象/
JSONArray jsonlist = JSONArray.fromObject(students);
//接下来发送数据
/设置编码，防止出现乱码问题/
resp.setCharacterEncoding("utf-8");
/得到输出流/
PrintWriter respWritter = resp.getWriter();
/将JSON格式的对象toString()后发送/
respWritter.append(jsonlist.toString());
} catch (Exception e) {
e.printStackTrace();
}
}
Html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>邮箱</th>
</tr>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>邮箱</th>
</tr>
</table>
</body>
<script src="jquery-3.4.1.min.js"></script>
<script>
window.onload(function requestData(){
$.ajax({
url: "http://127.0.0.1:8080/user/list",
type: "Post",
dataType: "json",
async:false,
success: function(jsonlist){
/*这个方法里是ajax发送请求成功之后执行的代码*/
showData(jsonlist);//我们仅做数据展示
},
error: function(msg){
alert("ajax连接异常："+msg);
}
});
});
function showData(jsonlist) {
var str = "";//定义用于拼接的字符串
for (var i = 0; i < jsonlist.length; i++) {
//拼接表格的行和列
str = "<tr><td>" + jsonlist[i].name + "</td><td>" + jsonlist[i].age + "</td><td>\" + jsonlist[i].email + \"</td></tr>";
//追加到table中
$("#tab").append(str); }
}
</script>
</html>
AJAX获取到数据了用这个网址可以显示出来，但是想用表格显示出来
url: "http://127.0.0.1:8080/user/list",
访问HTML页面就没有东西
最佳答案
0
showData(jsonlist);//我们仅做数据展示
这句前面输出jsonlist，看看有没有取到数据
如果有数据就加一个 json转换
如果没数据， 就是controller select方法那边有问题
奖励园豆：5
输入 AJAX里面的网址可以访问到数据
@小龙天龙:
$("#tab").append(str);
tab在哪？
其他回答(2)
0
楼主调试前端代码 不开F12吗 这东西 前后端 有一点配合不上，都出错啊 好麻烦
0
最后还是用Vue去接受控制层穿过来的数据就可以显示：
<div id="app">
<button @click="getStudents">演示</button>
<table border="1" cellpadding="0">
<tr>
<td>id</td>
<td>name</td>
<td>gender</td>
<td>age</td>
</tr>
<tr v-for="student in msg">
<td>{{student.id}}</td>
<td>{{student.name}}</td>
<td>{{student.gender}}</td>
<td>{{student.eamil}}</td>
<td>{{student.eamil}}</td>
</tr>
</table>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: null
},
methods:{
getStudents: function () {
var that = this;
axios.get("http://localhost:8888/a")
.then(function (response) {
that.msg = response.data;
}).catch(function (reason) {
alert("error");
});
}
}
});
</script>
