势必拿下SpringBoot 2022-04-30 16:33 采纳率: 100%
浏览 32
已结题

Jquery请求后台数据返回前端为空

想请教一下,要如何才能通过ajax获取到后台返回的数据
我排除的错误原因:
1.控制类请求后端失败(排除)(因为我 System.err.println(goods);语句在idea的console面板中显示出了商品的信息)排除查询失败的原因
2.url错误(排除)我按住了了ctrl点击所有的相关url都是可以成功跳转的
3.model没有将数据成功的传回前端(这个我也不确定)我在页面请求的同时用相同的方法是可以在前端显示的,但是通过点击事件触发就为空了
4.导包错误(排除)因为页面中别的jquery方法都是可以成功运行的
这是我的控制台中的报错

img


这是我的js代码

<script type="text/javascript" th:inline="javascript"   >

    $(function () {
        /* type="text/javascript" th:inline="javascript" 是th中的内联语句作用是使javascript中可以使用model传回的数据*/
        layui.use(['table', 'layer', 'form'], function() {
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;
            $("[id^=type-]").click(function () {
                //获取-隔开后的第一位的值
                let typeId=this.id.split('-')[1];
                console.log(typeId);
                //res指的回传的对象
                //这里尝试使用路径传参方法
                $.post("/pages/back/goods/getGoodsByTypeId/" + typeId,function () {
                    //为了提高性能让goodsDic代替$('#goodsDic')这样系统就只用进行一次查询而不是多次
                    let goodsDic=$('#goodsDic');
                    var goods=[[${good}]];//后台传回前端的数据类型
                    console.log(goods);
                    goodsDic.empty();//清空goodsDic中的所有商品
                    for (let i=0;i<=goods.length;i++){
                        let goodsItem = $(" <div style=\"align-items: center;padding: 10px; border: solid lightblue 1px;box-shadow: 0 0 5px lightgray ;width:30% ;\" >\n" +
                            "            <div><img src='"+goods.img+ "' style=\"width: 100%\"></div>\n" +
                            "            <div style=\"color: orangered\">¥<span style=\"font-size: 20px\">"+goods.price+"</span></div>\n" +
                            "            <div id=\"goods_title\">"+goods.title+ "</div>\n" +
                            "            <div style=\"color:deepskyblue;font-weight: bold;font-size: 16px;padding: 5px\">99万+<span style=\"color: gray\">"+goods.evaluationCount+"万+</span></div>\n" +
                            "            <div style=\"color: gray;font-size: 12px\">"+goods.merchantName+"</div>\n" +
                            "        </div>");
                        goodsDic.append(goodsItem);
                    }
                });
         /*       $.ajax({
                    url: "/pages/back/goods/getGoodsByTypeId/" + typeId,//如果不可以可以加入http
                    method: "POST",
                    success: function (data) {
                        console.log(data);

                    }
                });*/
                alert(this.id);
            });
        });


    })


</script >


这是我的控制类代码

 @RequestMapping("getGoodsByTypeId/{typeId}")
    //因为使用了路径传参的方式所以必须要加入@PathVariable注解
    //并且前端中的路径要在getGoodsByTypeId再加入一个/否者无法识别跳转
   public String getGoodsByTypeId(@PathVariable Integer typeId, Model model){
    System.err.println(typeId);
       List<Goods> goods= goodsService.getGoodsByTypeId(typeId);
        System.err.println(goods);
        model.addAttribute("goods",goods);

    /*    if (goods==null){
            System.err.println("查询无此类商品");
           model.addAttribute("msg","查询无此类商品");
        }else {
            model.addAttribute("good",goods);
        }*/
        return "index";
    }

  • 写回答

2条回答 默认 最新

  • Iridescent 2022-04-30 17:28
    关注

    model.addAttribute()是为了给JSP页面传值
    你怎么直接在js里面直接接收咧
    javascript与jsp中不能相互传值,因为javascript运行在客户端,jsp运行在服务器端。若想使他们能够相互传参数,可以在jsp页面中设置一个hidden属性的控件,用它的value来传递所需的数值。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 5月8日
  • 已采纳回答 4月30日
  • 创建了问题 4月30日

悬赏问题

  • ¥20 wireshark抓不到vlan
  • ¥20 关于#stm32#的问题:需要指导自动酸碱滴定仪的原理图程序代码及仿真
  • ¥20 设计一款异域新娘的视频相亲软件需要哪些技术支持
  • ¥15 stata安慰剂检验作图但是真实值不出现在图上
  • ¥15 c程序不知道为什么得不到结果
  • ¥40 复杂的限制性的商函数处理
  • ¥15 程序不包含适用于入口点的静态Main方法
  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位,为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后,界面没有,cadence 启动不起来