SSM后端向前端 js中 传递数据

本文详细介绍了前后端数据交互的方法,包括普通数据、List类型数据的传递方式,以及如何使用JavaScript进行数据接收和处理,适合前后端开发人员学习。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一:后台向前台传递普通数据

后台传递方法:

        int XXXX = 0;
        String YYYY = "";
        try {
            //  将后台信息传至前台
            PrintWriter out = response.getWriter();
            Map<String, Object> hashmap = new HashMap<>();
            hashmap.put("xxxx", XXXX);
            hashmap.put("yyyy", yyyy);
            out.println(JSON.toJSON(hashmap));
            out.flush();
            out.close();
        } catch (
                IOException e) {
            e.printStackTrace();
        }

前台Js接收方法:

 $.ajax({
        url: "",
         type: "post",
        dataType: "json",
        data: {},
        success: function (data) {
            //接收后台数据

            var json = JSON.stringify(data);
            var a = eval('(' + json + ')');//转json字符串,不可以为 eval(json)
            
            alert(a.xxxx);//获取数据 
            alert(a.yyyy);//获取数据
        },

        error: function (er) { //失败,回调函数
        }
    });

二:后台向前台传递List 类型数据 和其他普通数据

后台传递方法:

        List<Product> list =.... ;
 
      try {
            //  将后台信息传至前台
            PrintWriter out = response.getWriter();
            Map<String, Object> hashmap = new HashMap<>();
            hashmap.put("productList", productList);
            hashmap.put("xxxx",XXXX);
            out.println(JSON.toJSON(hashmap));
            System.out.println(JSON.toJSON(hashmap));
            out.flush();
            out.close();
        } catch (
                IOException e) {
            e.printStackTrace();
        }

前台 js 接收:

    $.ajax({
            url: "/generalManager/queryProductInfo", //后台url
            type: "POST",
            dataType: "json",
            contentType: "application/json;charset=UTF-8",
            data: JSON.stringify(product),
            success: function (data) {
                //alert("查询成功 " + data.length + "条数据")
                $("#btn_clear").click();
                //成功,回调函数
                var json = JSON.stringify(data);//格式化Json数据
  
                var  a = eval('('+json+')');

                //输出会list 对象值
                alert(a.xxxx);

                var list = eval(a.productList);//转json字符串

                $('#product_tbody tr').empty();//表格去重
                $.each(list, function (index, item) {
                    
                      alert(item.xxxx)
                });
                $('#product_tbody').append(str);

                PageInfo();//添加分页显示
                alert(totalCount + '  COUNT')
                alert(endPage + " endPage")
            },

            error: function (er) {          //失败,回调函数
                alert('查询错误');
                //  alert(er)

            }
        });
        // productDetail();
    });

三:后台向前台传递 List 类型数据

后台传递方法:

        List<XXXX> list = 。。。
        String xxxList = JSON.toJSONString(list);

        //  将后台信息传至前台
        try {
            PrintWriter out = response.getWriter();
            out.println(xxxList);//向前台传递list 数据
            out.flush();
            out.close();
        } catch (
                IOException e) {
            e.printStackTrace();
        }

前台 js 接受方法:

        $.ajax({
            url: "", //后台url
            type: "",
            dataType: "",
            contentType: "application/json;charset=UTF-8",
            data:{},
            success: function (data) {
                //前台获取后台 list 中数据

                var json = JSON.stringify(data);//格式化Json数据(将 list 数据转化为json)
                var a = eval(json);//转json字符串(不可以为 eval('('+json+')'));

                //遍历list 中的数据
                 $.each(a, function (index, item) {//index 为list 索引,item 为 list 中的对象
                   alert(item.xxx);//获取list中的对象的属性
                   alert(item.yyy);//获取list中的对象的属性
                });
            },
            error: function (er) {          //失败,回调函数
             }
        });

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值