势必拿下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日

悬赏问题

  • ¥15 Stata链式中介效应代码修改
  • ¥15 latex投稿显示click download
  • ¥15 请问读取环境变量文件失败是什么原因?
  • ¥15 在若依框架下实现人脸识别
  • ¥15 网络科学导论,网络控制
  • ¥100 安卓tv程序连接SQLSERVER2008问题
  • ¥15 利用Sentinel-2和Landsat8做一个水库的长时序NDVI的对比,为什么Snetinel-2计算的结果最小值特别小,而Lansat8就很平均
  • ¥15 metadata提取的PDF元数据,如何转换为一个Excel
  • ¥15 关于arduino编程toCharArray()函数的使用
  • ¥100 vc++混合CEF采用CLR方式编译报错