ajax部分报错提示
1 | <!DOCTYPE html><br><html lang="en"><head><br> <meta charset="UTF-8"><br> <title>慕课书评网</title><br> <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no"><br> <link rel="stylesheet" href="./resources/bootstrap/bootstrap.css"><br> <link rel="stylesheet" href="./resources/raty/lib/jquery.raty.css"><br> <script src="./resources/jquery.3.3.1.min.js"></script><br> <script src="./resources/bootstrap/bootstrap.min.js"></script><br> <script src="./resources/art-template.js"></script><br> <script src="./resources/raty/lib/jquery.raty.js"></script><br> <style><br> .highlight {<br> color: red !important;<br> }<br> a:active{<br> text-decoration: none!important;<br> }<br> </style><br><br><br> <style><br> .container {<br> padding: 0px;<br> margin: 0px;<br> }<br><br> .row {<br> padding: 0px;<br> margin: 0px;<br> }<br><br> .col- * {<br> padding: 0px;<br> }<br> </style><br> <script type="text/html" id="tpl"><br> <a href="/book/{{bookId}}" style="color: inherit"><br> <div class="row mt-2 book"><br> <div class="col-4 mb-2 pr-2"><br> <img class="img-fluid" src="{{cover}}"><br> </div><br> <div class="col-8 mb-2 pl-0"><br> <h5 class="text-truncate">{{bookName}}</h5><br><br> <div class="mb-2 bg-light small p-2 w-100 text-truncate">{{author}}</div><br><br><br> <div class="mb-2 w-100">{{subTitle}}</div><br><br> <p><br> <span class="stars" data-score="{{evaluationScore}}" title="gorgeous"></span><br> <span class="mt-2 ml-2">{{evaluationScore}}</span><br> <span class="mt-2 ml-2">{{evaluationQuantity}}</span><br> </p><br> </div><br> </div><br> </a><br><br> <hr><br> </script><br><script><br> $.fn.raty.defaults.path="./resources/raty/lib/images"<br> function loadMore(isReset) {<br> if (isreset == true) {<br> $("#bookList").html("");<br> $("#nextPage").val();<br> }<br> var nextPage = $("#nextPage").val();<br> var categoryId = $("#categoryId").val();<br> var order = $("#order").val();<br> loadMore(true)<br> }<br> $.ajax({<br> url:"/books",<br> data:{"p":1},<br> type:"get",<br> dataType:"json",<br> success:function(json){<br> console.info(json);<br> var list= json.records;<br> for(var i=0;i<json.length;i++){<br> var book=json.records[i];<br> // var html="<h1>"+book.bookName+"</h1>";<br> //数据结合tpl模板,生成html<br> var html=template("tpl",book);<br> console.info(html);<br> $("#bookList").append(html);<br> }<br> $.(".starts").raty({readOnly:true});<br> }<br> $(function(){<br> $("#btnMore").click(function(){<br> loadMore();<br> })<br> $.(".category").click(function(){<br> $(".category").removeClass("highlight");<br> $(".category").addClass("text-black-50");<br> $(this).addClass("highlight");<br> var categoryId=$(this).data("category");<br> $("#categoryId").val(categoryId);<br> })<br> $(".order").click(function(){<br> $(".order").removeClass("highlight");<br> $(".order").addClass("text-black-50");<br> var order= $(this).data("order");<br><br> $("#order").val(order);<br> })<br> })<br><br> });<br><br><br></script><br></head><br><body><br><div class="container"><br> <nav class="navbar navbar-light bg-white shadow mr-auto"><br> <ul class="nav"><br> <li class="nav-item"><br> <a href="/"><br> <img src="https://m.imooc.com/static/wap/static/common/img/logo2.png" class="mt-1" style="width: 100px"><br> </a><br> </li><br><br> </ul><br> <#if loginMember??><br> <h6 class="mt-1"><br> <img style="width: 2rem;margin-top: -5px" class="mr-1" src="./images/user_icon.png">${loginMember.nickname}<br> </h6><br> <#else><br> <a href="/login.html" class="btn btn-light btn-sm"><br> <img style="width: 2rem;margin-top: -5px" class="mr-1" src="./images/user_icon.png">登录<br> </a><br> </#if><br><br> </nav><br> <div class="row mt-2"><br><br><br> <div class="col-8 mt-2"><br> <h4>热评好书推荐</h4><br> </div><br><br> <div class="col-8 mt-2"><br> <span data-category="-1" style="cursor: pointer" class="highlight font-weight-bold category">全部</span><br> <#list categoryList as category><br> <a style="cursor: pointer" data-category="${category.categoryId}" class="text-black-50 font-weight-bold category">${category.categoryName}</a><br> <#if category_has_next>|</#if><br><#-- <a style="cursor: pointer" data-category="2" class="text-black-50 font-weight-bold category">后端</a>--><br><#-- |--><br><#-- <a style="cursor: pointer" data-category="3" class="text-black-50 font-weight-bold category">测试</a>--><br><#-- |--><br><#-- <a style="cursor: pointer" data-category="4" class="text-black-50 font-weight-bold category">产品</a>--><br><br> </#list><br> </div><br><br> <div class="col-8 mt-2"><br> <span data-order="quantity" style="cursor: pointer" class="order highlight font-weight-bold mr-3">按热度</span><br><br> <span data-order="score" style="cursor: pointer" class="order text-black-50 mr-3 font-weight-bold">按评分</span><br> </div><br> </div><br> <div class="d-none"><br> <input type="hidden" id="nextPage" value="2"><br> <input type="hidden" id="categoryId" value="-1"><br> <input type="hidden" id="order" value="quantity"><br> </div><br><br> <div id="bookList"><br><#-- <script type="text/html" id="tpl"></script>--><br><#-- <a href="/book/{{bookId}}" style="color: inherit">--><br><#-- <div class="row mt-2 book">--><br><#-- <div class="col-4 mb-2 pr-2">--><br><#-- <img class="img-fluid" src="{{cover}}">--><br><#-- </div>--><br><#-- <div class="col-8 mb-2 pl-0">--><br><#-- <h5 class="text-truncate">{{bookName}}</h5>--><br><br><#-- <div class="mb-2 bg-light small p-2 w-100 text-truncate">{{author}}</div>--><br><br><br><#-- <div class="mb-2 w-100">{{subTitle}}</div>--><br><br><#-- <p>--><br><#-- <span class="stars" data-score="{{evaluationScore}}" title="gorgeous"><img alt="1" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="2" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="3" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="4" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="5" src="./resources/raty/lib/images/star-on.png" title="gorgeous"><input name="score" type="hidden" value="{{evaluationScore}}" readonly=""></span>--><br><#-- <span class="mt-2 ml-2">{{evaluationScore}}</span>--><br><#-- <span class="mt-2 ml-2">{{evaluationQuantity}}</span>--><br><#-- </p>--><br><#-- </div>--><br><#-- </div>--><br><#-- </a>--><br><br><#-- <hr>--><br><#-- --><br><#-- <a href="/book/25" style="color: inherit">--><br><#-- <div class="row mt-2 book">--><br><#-- <div class="col-4 mb-2 pr-2">--><br><#-- <img class="img-fluid" src="https://img1.sycdn.imooc.com//5da923d60001a92f05400720.jpg">--><br><#-- </div>--><br><#-- <div class="col-8 mb-2 pl-0">--><br><#-- <h5 class="text-truncate">网络协议那些事儿</h5>--><br><br><#-- <div class="mb-2 bg-light small p-2 w-100 text-truncate">Oscar · 一线大厂高级软件工程师</div>--><br><br><br><#-- <div class="mb-2 w-100">前后端通用系列课</div>--><br><br><#-- <p>--><br><#-- <span class="stars" data-score="4.9" title="gorgeous"><img alt="1" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="2" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="3" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="4" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="5" src="./resources/raty/lib/images/star-on.png" title="gorgeous"><input name="score" type="hidden" value="4.9" readonly=""></span>--><br><#-- <span class="mt-2 ml-2">4.9</span>--><br><#-- <span class="mt-2 ml-2">15人已评</span>--><br><#-- </p>--><br><#-- </div>--><br><#-- </div>--><br><#-- </a>--><br><br><#-- <hr>--><br><#-- --><br><#-- <a href="/book/32" style="color: inherit">--><br><#-- <div class="row mt-2 book">--><br><#-- <div class="col-4 mb-2 pr-2">--><br><#-- <img class="img-fluid" src="https://img1.sycdn.imooc.com//5dff8f33000138fa05400720.jpg">--><br><#-- </div>--><br><#-- <div class="col-8 mb-2 pl-0">--><br><#-- <h5 class="text-truncate">给程序员的职场情商课</h5>--><br><br><#-- <div class="mb-2 bg-light small p-2 w-100 text-truncate">风落几番 · 蚂蚁金服测试专家</div>--><br><br><br><#-- <div class="mb-2 w-100">懂技术，更要懂说话的艺术</div>--><br><br><#-- <p>--><br><#-- <span class="stars" data-score="4.7" title="gorgeous"><img alt="1" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="2" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="3" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="4" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="5" src="./resources/raty/lib/images/star-half.png" title="gorgeous"><input name="score" type="hidden" value="4.7" readonly=""></span>--><br><#-- <span class="mt-2 ml-2">4.7</span>--><br><#-- <span class="mt-2 ml-2">15人已评</span>--><br><#-- </p>--><br><#-- </div>--><br><#-- </div>--><br><#-- </a>--><br><br><#-- <hr>--><br><#-- --><br><#-- <a href="/book/1" style="color: inherit">--><br><#-- <div class="row mt-2 book">--><br><#-- <div class="col-4 mb-2 pr-2">--><br><#-- <img class="img-fluid" src="https://img1.sycdn.imooc.com//5c247b0b0001a0a903600480.jpg">--><br><#-- </div>--><br><#-- <div class="col-8 mb-2 pl-0">--><br><#-- <h5 class="text-truncate">教你用 Python 进阶量化交易</h5>--><br><br><#-- <div class="mb-2 bg-light small p-2 w-100 text-truncate">袁霄 · 全栈工程师</div>--><br><br><br><#-- <div class="mb-2 w-100">你的量化交易开发第一课</div>--><br><br><#-- <p>--><br><#-- <span class="stars" data-score="4.9" title="gorgeous"><img alt="1" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="2" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="3" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="4" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="5" src="./resources/raty/lib/images/star-on.png" title="gorgeous"><input name="score" type="hidden" value="4.9" readonly=""></span>--><br><#-- <span class="mt-2 ml-2">4.9</span>--><br><#-- <span class="mt-2 ml-2">14人已评</span>--><br><#-- </p>--><br><#-- </div>--><br><#-- </div>--><br><#-- </a>--><br><br><#-- <hr>--><br><#-- --><br><#-- <a href="/book/7" style="color: inherit">--><br><#-- <div class="row mt-2 book">--><br><#-- <div class="col-4 mb-2 pr-2">--><br><#-- <img class="img-fluid" src="https://img1.sycdn.imooc.com//5cfdcd1e00015cf203600480.jpg">--><br><#-- </div>--><br><#-- <div class="col-8 mb-2 pl-0">--><br><#-- <h5 class="text-truncate">手把手带你打造自己的UI样式库</h5>--><br><br><#-- <div class="mb-2 bg-light small p-2 w-100 text-truncate">Rosen · 一线互联网架构设计师</div>--><br><br><br><#-- <div class="mb-2 w-100">前端开发进阶必学</div>--><br><br><#-- <p>--><br><#-- <span class="stars" data-score="4.9" title="gorgeous"><img alt="1" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="2" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="3" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="4" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="5" src="./resources/raty/lib/images/star-on.png" title="gorgeous"><input name="score" type="hidden" value="4.9" readonly=""></span>--><br><#-- <span class="mt-2 ml-2">4.9</span>--><br><#-- <span class="mt-2 ml-2">14人已评</span>--><br><#-- </p>--><br><#-- </div>--><br><#-- </div>--><br><#-- </a>--><br><br><#-- <hr>--><br><#-- --><br><#-- <a href="/book/6" style="color: inherit">--><br><#-- <div class="row mt-2 book">--><br><#-- <div class="col-4 mb-2 pr-2">--><br><#-- <img class="img-fluid" src="https://img1.sycdn.imooc.com//5cf47cb800010dde03600480.jpg">--><br><#-- </div>--><br><#-- <div class="col-8 mb-2 pl-0">--><br><#-- <h5 class="text-truncate">零基础学透 TypeScript</h5>--><br><br><#-- <div class="mb-2 bg-light small p-2 w-100 text-truncate">Lison · 前端高级工程师</div>--><br><br><br><#-- <div class="mb-2 w-100">关于TS的前世今生一篇打尽</div>--><br><br><#-- <p>--><br><#-- <span class="stars" data-score="4.6" title="gorgeous"><img alt="1" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="2" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="3" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="4" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="5" src="./resources/raty/lib/images/star-half.png" title="gorgeous"><input name="score" type="hidden" value="4.6" readonly=""></span>--><br><#-- <span class="mt-2 ml-2">4.6</span>--><br><#-- <span class="mt-2 ml-2">13人已评</span>--><br><#-- </p>--><br><#-- </div>--><br><#-- </div>--><br><#-- </a>--><br><br><#-- <hr>--><br><#-- --><br><#-- <a href="/book/31" style="color: inherit">--><br><#-- <div class="row mt-2 book">--><br><#-- <div class="col-4 mb-2 pr-2">--><br><#-- <img class="img-fluid" src="https://img1.sycdn.imooc.com//5df760170001512305400720.jpg">--><br><#-- </div>--><br><#-- <div class="col-8 mb-2 pl-0">--><br><#-- <h5 class="text-truncate">Python 数据分析通关攻略</h5>--><br><br><#-- <div class="mb-2 bg-light small p-2 w-100 text-truncate">Lemeng_study · 8年经验资深数据挖掘专家</div>--><br><br><br><#-- <div class="mb-2 w-100">编程技术提升职场竞争力系列</div>--><br><br><#-- <p>--><br><#-- <span class="stars" data-score="4.8" title="gorgeous"><img alt="1" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="2" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="3" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="4" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="5" src="./resources/raty/lib/images/star-on.png" title="gorgeous"><input name="score" type="hidden" value="4.8" readonly=""></span>--><br><#-- <span class="mt-2 ml-2">4.8</span>--><br><#-- <span class="mt-2 ml-2">13人已评</span>--><br><#-- </p>--><br><#-- </div>--><br><#-- </div>--><br><#-- </a>--><br><br><#-- <hr>--><br><#-- --><br><#-- <a href="/book/34" style="color: inherit">--><br><#-- <div class="row mt-2 book">--><br><#-- <div class="col-4 mb-2 pr-2">--><br><#-- <img class="img-fluid" src="https://img1.sycdn.imooc.com//5e16e9730001d85605400720.jpg">--><br><#-- </div>--><br><#-- <div class="col-8 mb-2 pl-0">--><br><#-- <h5 class="text-truncate">智能时代：写给想学习大数据的你</h5>--><br><br><#-- <div class="mb-2 bg-light small p-2 w-100 text-truncate">RangeYan · 一线互联网公司数据研发专家</div>--><br><br><br><#-- <div class="mb-2 w-100">驾驭未来工作的利器</div>--><br><br><#-- <p>--><br><#-- <span class="stars" data-score="4.7" title="gorgeous"><img alt="1" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="2" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="3" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="4" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="5" src="./resources/raty/lib/images/star-half.png" title="gorgeous"><input name="score" type="hidden" value="4.7" readonly=""></span>--><br><#-- <span class="mt-2 ml-2">4.7</span>--><br><#-- <span class="mt-2 ml-2">13人已评</span>--><br><#-- </p>--><br><#-- </div>--><br><#-- </div>--><br><#-- </a>--><br><br><#-- <hr>--><br><#-- --><br><#-- <a href="/book/33" style="color: inherit">--><br><#-- <div class="row mt-2 book">--><br><#-- <div class="col-4 mb-2 pr-2">--><br><#-- <img class="img-fluid" src="https://img1.sycdn.imooc.com//5e0deb5c0001282f05400720.jpg">--><br><#-- </div>--><br><#-- <div class="col-8 mb-2 pl-0">--><br><#-- <h5 class="text-truncate">分布式技术面试大厂真题30讲</h5>--><br><br><#-- <div class="mb-2 bg-light small p-2 w-100 text-truncate">王炸 · 8年经验一线大厂架构师</div>--><br><br><br><#-- <div class="mb-2 w-100">让你在寒冬求职季脱颖而出</div>--><br><br><#-- <p>--><br><#-- <span class="stars" data-score="4.9" title="gorgeous"><img alt="1" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="2" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="3" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="4" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="5" src="./resources/raty/lib/images/star-on.png" title="gorgeous"><input name="score" type="hidden" value="4.9" readonly=""></span>--><br><#-- <span class="mt-2 ml-2">4.9</span>--><br><#-- <span class="mt-2 ml-2">12人已评</span>--><br><#-- </p>--><br><#-- </div>--><br><#-- </div>--><br><#-- </a>--><br><br><#-- <hr>--><br><#-- --><br><#-- <a href="/book/17" style="color: inherit">--><br><#-- <div class="row mt-2 book">--><br><#-- <div class="col-4 mb-2 pr-2">--><br><#-- <img class="img-fluid" src="https://img1.sycdn.imooc.com//5d5510fa00011fa605400720.jpg">--><br><#-- </div>--><br><#-- <div class="col-8 mb-2 pl-0">--><br><#-- <h5 class="text-truncate">你的第一本Python基础入门书</h5>--><br><br><#-- <div class="mb-2 bg-light small p-2 w-100 text-truncate">黄浮云 · 资深云计算工程师</div>--><br><br><br><#-- <div class="mb-2 w-100">人人受益的Python开学第一课</div>--><br><br><#-- <p>--><br><#-- <span class="stars" data-score="4.7" title="gorgeous"><img alt="1" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="2" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="3" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="4" src="./resources/raty/lib/images/star-on.png" title="gorgeous"> <img alt="5" src="./resources/raty/lib/images/star-half.png" title="gorgeous"><input name="score" type="hidden" value="4.7" readonly=""></span>--><br><#-- <span class="mt-2 ml-2">4.7</span>--><br><#-- <span class="mt-2 ml-2">11人已评</span>--><br><#-- </p>--><br><#-- </div>--><br><#-- </div>--><br><#-- </a>--><br><br><#-- <hr>--><br><#-- </div>--><br> <button type="button" id="btnMore" data-next-page="1" class="mb-5 btn btn-outline-primary btn-lg btn-block"><br> 点击加载更多...<br> </button><br> <div id="divNoMore" class="text-center text-black-50 mb-5" style="display: none;">没有其他数据了</div><br></div><br><br></body><br></html><br> |
16
收起
正在回答 回答被采纳积分+1
2回答
好帮手慕阿满
2021-07-12 19:03:02
同学你好，这里大致解释一下代码的执行逻辑，如果有哪里不懂的，请具体提问。
$(function() {}) 是$(document).ready(function()的简写，当加载页面时执行。所以当访问index.ftl页面时，加载完页面，会执行如下$(function(){loadMore(true)})。
然后调用如下loadMore()函数，按照顺序执行。如：
通过ajax访问后台的/books映射，查询图书信息并返回，通过success中的函数处理，将查询结果显示在页面中。
当点击页面中加载更多按钮时，触发如下函数。
如果ajax中如何处理不清楚，可以再去学习一下ajax的课程。
祝学习愉快~
java工程师2020版
- 参与学习 人
- 提交作业 9404 份
- 解答问题 16556 个
综合就业常年第一，编程排行常年霸榜，无需脱产即可学习，北上广深月薪过万 无论你是未就业的学生还是想转行的在职人员，不需要基础，只要你有梦想，想高薪
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧