首页 新闻 搜索 专区 学院

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页面就没有东西

沛之的主页 沛之 | 菜鸟二级 | 园豆:208
提问于:2020-04-18 12:57
< >
分享
最佳答案
0

showData(jsonlist);//我们仅做数据展示

这句前面输出jsonlist,看看有没有取到数据
如果有数据就加一个 json转换

如果没数据, 就是controller select方法那边有问题

奖励园豆:5
风浪 | 老鸟四级 |园豆:2861 | 2020-04-20 10:46

输入 AJAX里面的网址可以访问到数据

沛之 | 园豆:208 (菜鸟二级) | 2020-04-20 10:48

@小龙天龙:
$("#tab").append(str);

tab在哪?

风浪 | 园豆:2861 (老鸟四级) | 2020-04-20 11:29
其他回答(2)
0

楼主调试前端代码 不开F12吗 这东西 前后端 有一点配合不上,都出错啊 好麻烦

星空下w | 园豆:215 (菜鸟二级) | 2020-04-22 09:20
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>

沛之 | 园豆:208 (菜鸟二级) | 2020-05-10 15:42
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册