后端list集合中的数据传递到前台HTML中显示(表格形式)

一、HTML页面通过ajax发送http请求

前端有个普通的HTML页面,如下。
页面引入了jquery,页面有个表格
在这里插入图片描述

通过ajax发送请求

window.onload(function requestData(){
   $.ajax({
        url: "要访问的地址",
        type: "post",
        dataType: "json",
        success: function(data){
            /*这个方法里是ajax发送请求成功之后执行的代码*/
            showData(data);//我们仅做数据展示
        },
        error: function(msg){
            alert("ajax连接异常:"+msg);
        }
    });
});

后台的数据

@RequestMapping(value="/queryAllStudent")
public void query(HttpServletResponse resp) {
    try {
        /*list集合中存放的是好多student对象*/
        List<Student> students = userService.getAllStudentInfo();
        /*将list集合装换成json对象*/
        JSONArray data = JSONArray.fromObject(students);
        //接下来发送数据
        /*设置编码,防止出现乱码问题*/
        resp.setCharacterEncoding("utf-8");
        /*得到输出流*/
        PrintWriter respWritter = resp.getWriter();
        /*将JSON格式的对象toString()后发送*/
        respWritter.append(data.toString());
    } catch (Exception e) {
        e.printStackTrace();
    }
}
public class student {
    private int id;//id
    private String name;//姓名
    private String password;//密码

    //省略get set方法。。。
}

前台展示数据(表格形式)

//展示数据
function showData(data) {
	var str = "";//定义用于拼接的字符串
	for (var i = 0; i < data.length; i++) {
	   //拼接表格的行和列
	   str = "<tr><td>" + data[i].name + "</td><td>" + data[i].password + "</td></tr>";
	    //追加到table中
	   $("#tab").append(str);         }
	}

流程

数据传送的流程
前台(html)发送ajax请求 --> 后台servlet中接受到请求,然后响应数据(来自数据库或其他) --> 前台(HTML)
ajax接受数据,处理数据(以表格显示).
在这里插入图片描述

  • 1
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值