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

版权声明:UU小七 :转载请标注哦!^v^ https://blog.csdn.net/qq_36474549/article/details/84204681

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

后台传递方法:

        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) {          //失败,回调函数
             }
        });

猜你喜欢

转载自blog.csdn.net/qq_36474549/article/details/84204681