图书搜索功能时为什么后台数据正常,前台不显示

图书搜索功能时为什么后台数据正常,前台不显示

# 具体遇到的问题
图书搜索功能时后台数据正常,但前台获取不到后台的数据?

# 报错信息的截图
前端代码和后端代码均有打印输出boData功能,但后端打印输出正常,前端却为空
# 相关课程内容截图
http://img1.sycdn.imooc.com//climg/5fdb64dc09e959b411900721.jpg

http://img1.sycdn.imooc.com//climg/5fdb65040989d4e911900721.jpg


# 尝试过的解决思路和结果

# 粘贴全部相关代码,切记添加代码注释(请勿截图)

前端代码:

function search(){

      console.log("开始搜索");

      $.ajax({

      type:"post",

      dataType:"json",

      url:"/management?method=searchBook",

      data:$("#form").serialize(),

      success:function(json){

      console.log("搜索成功了");

      console.log("boData:"+"${boData}");

      var html ='<c:forEach items="${boData }" var="book" varStatus="idx">'+

      '                        <tr id="${book.bookId }">'+

      '                            <td>${idx.index+1 }</td>'+

      '                            <td>${book.bookId }</td>'+

      '                            <td>${book.bookName }</td>'+

      '                            <td>${book.category.categoryName }</td>'+

      '                            <td>¥<fmt:formatNumber value="${book.price }" pattern="0.00"/></td>'+

      '                            <td><img src="${book.cover }" style="width:160px;height:90px"></td>'+

      '                            <td>'+

      '                            <a href="/management?method=show_updateBook&&bookId=${book.bookId }">修改</a>'+

      '                            <a href="javascript:void(0)" data-bookId="${book.bookId }" data-bookName="${book.bookName }" onclick="del(this)">删除</a>'+

      ' '+

      '                            </td>'+

      '                            <!--在循环显示数据时,此处的book0001可以用EL表达式进行替换-->'+

      '                        </tr>'+

      '</c:forEach>';

      

      $("tbody").html(html);

      

      }

      })

      }


后端代码:

private void searchBook(HttpServletRequest request,HttpServletResponse response) throws IOException {

HttpSession session = request.getSession();

String categoryName = request.getParameter("searchContent");

System.out.println(categoryName);

List<Book> boData = bookServiceImpl.getBooksByCategoryName(categoryName);

System.out.println(boData);

session.setAttribute("boData", boData);

PrintWriter out = response.getWriter();

out.println("{\"result\":\"ok\"}");

}


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕阿满 2020-12-18 11:49:00

同学你好,设置dataType后为json后,后台应该返回json类型数据。

http://img1.sycdn.imooc.com//climg/5fdc2590090cc25803610213.jpg

​success:function(json),这里的json表示后台返回的数据,应该从这个json中获取相应的数据并展示,而不是使用boData获取数据,

http://img1.sycdn.imooc.com//climg/5fdc25cc090d77f604810159.jpg

同学可以参考课程《jQuery与Ajax入门》教辅区的《使用Ajax完成新闻查询功能》教辅来具体实现。

祝学习愉快~

  • 提问者 慕虎5485268 #1

    json获取数据的话,在js里就没法用<c:forEach>标签了,那怎么实现遍历功能呢

    2020-12-18 11:52:48
  • 好帮手慕阿满 回复 提问者 慕虎5485268 #2

    同学你好,使用for循环的方式,参考如下代码:

    http://img1.sycdn.imooc.com//climg/5fdc414609e7d16f07540440.jpg

    祝学习愉快~

    2020-12-18 13:42:50
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师
插入代码