一点小问题

一点小问题

<%@page contentType="text/html;charset=utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图书后台管理</title>
        <link rel="stylesheet" href="css/index.css">
        <link rel="stylesheet" href="css/bootstrap.min.css">
           <script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
            <script type="text/javascript" src="/js/sweetalert2.js"></script>
            <script type="text/javascript" src="/js/validation.js"></script>
            <script type="text/javascript">
                   function del(obj){
                	   var id = $(obj).attr("data-id");
                	    swal.fire({
                	    	   title:"确认要删除这本书么",
                	    	   showCancelButton: true,
                	           confirmButtonText:"是",
                	    	   cancelButtonText:"否",               	    	   
                	    }).then(function(result){
                	    	if(result.value == true){
                	    		$.ajax({
                	    			"url":"/books",
                	    			"type":"get",
                	    			"data":{"id":id,"method":"delete"},
                	    		    "datatype":"json",
                	    		    "success":function(data){
                	    		    	var json = JSON.parse(data);
                	    		    	if(json.result == "ok"){
                	    		    		window.location.reload();
                	    		    	}else{
                	    		    		swal.fire({
                	    		    			title:json.result,
                	    		    		})                	    		    		
                	    		    	}              	    		    	
                	    		    }
                	    		})                	    		                	    		
                	    	}              	    	             	    	
                	    })               	   
                   } 
                   
              function search(input){ 
                       var val =   $(searchContent).val();       
                       if($.trim(val)  == ""){
                           $(searchContent).attr("placeholder","内容不可以为空");
                           return; 
                       }
                       $('#tbody1').empty();
                       $.ajax({
                    	   "url":"/books",
                    	   "type":'get',
                    	   "data":{"data":val,"method":"search"},
                           "datatype": "json",
                           "success":function(data){
                        	   
                        	  var json =  JSON.parse(data);
                        	  console.log(json);
                        	   if(json.result == "noid"){
                        		   $(searchContent).val("该分类不存在");
                        	   }else{
                        		   $(searchContent).val("");
                        		   var html;
                        		   $.each(json,function(index,book){
                        			  var price = book.price + "";
                        			  console.log(typeof price);
                        			   html=html+ "<tr  id = 'tr1'>"
                                       + "<td> " + (index+1) +"</td>"
                                       + "<td> " + book.id + " </td>"
                                       + "<td>" +  book.bname +"</td>"
                                       +"<td>" + val + "</td>"
                                       + "<td><fmt:formatNumber pattern='$0.00' value= "+ price + "></fmt:formatNumber></td>"
                                       +  "<td><img src=" + book.cover + " Style='width:130px;height:150px'></td>"
                                       + "<td><a href='/books?method=update&bookId="+ book.id+"'>修改 &thinsp;</a>"
                                       + "<a href='javascript:void(0)'  data-id="+book.id+ " onclick='del(this)'>删除</a></td> "
                                       ;                      			                          			   
                        		   });
                        		   $('#tbody1').html(html);
                        		   
                        	   }
                        	   
                        	   
                           }
                       })
                       
           }

            
                   
            </script>    
    
    </head>

    <body>
       <header>
            <div class="container">
                    <nav>
                            <a href="/booklist" >图书信息管理</a>
                    </nav>
                    <nav>
                            <a href="/category?method=list" >分类管理</a>
                    </nav>
                   
            </div>
        </header>
        <section class="banner">
            <div class="container">
                <div>
                    <h1>图书管理系统</h1>
                    <p>图书信息管理</p>
                </div>
            </div>
        </section>
        <section class="main">


            <div class="container">
                <form class="javascript:void(0)" action="javascript:void(0)" method="post">
                <div class="form-group"  style="float: right;">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary" onclick="search()">查询</button>&nbsp;&nbsp;&nbsp;
                    </div>
                </div>
                <div class="form-group" style="float: right;width: 300px;">
                    <div class="col-sm-8">
                        <input name="searchContent" class="form-control" id="searchContent"
                        placeholder="输入要查询的分类" style="width: 250px">
                    </div>
                </div>

                
            </form>
            </div>
            <div class="container">

                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>图书编号</th>
                        <th>图书名称</th>
                        <th>分类</th>
                        <th>价格</th>
                        <th>图书封面</th>
                        <th>操作</th>

                    </tr>
                    </thead>
                    <tbody id="tbody1">                        
                        <c:forEach items="${bookPage.pageData }" var="book" varStatus="idx">
                            <tr id="tr1">
                                <td>${idx.index +1 }</td>
                                <td>${book.id }</td>
                                <td>${book.bname }</td>
                                <c:choose>
                                    <c:when test="${book.category == 'ca001' }"><td>Arts & Photography</td></c:when>                                 
                                    <c:when test="${book.category == 'ca002' }"><td>History</td></c:when>                                  
                                    <c:when test="${book.category == 'ca003' }"><td>Business & Money</td></c:when>                                 
                                    <c:otherwise><td>未知的图书类型</td></c:otherwise>                                 
                                </c:choose>
                                <td><fmt:formatNumber pattern="$0.00" value="${book.price }"></fmt:formatNumber>  </td>
                                <td><img src="${book.cover }" Style="width:130px;height:150px"></td>
                                <td>
                                <a href="/books?method=update&bookId=${book.id }">修改</a>
                                <a href="javascript:void(0)"  data-id="${book.id }" onclick="del(this)">删除</a>
                                </td>
                            </tr>
                        </c:forEach>
                    </tbody>
                </table>
            </div>
        </section>
        <section class="page">
            <div class="container">
                <div id="fatie">
                    <a href="/books?method=add"><button>新建</button></a>
                </div>
            </div>
        </section>
      <div class="page-nav">
        <ul>
            <li><a href="/booklist?p=1">首页</a></li>
            <c:if test="${bookPage.hasPreviousPage == true }">
                 <li><a href="/booklist?p=${bookPage.page -1 }">上一页</a></li>
            </c:if>
            <c:forEach begin="1" end="${bookPage.totalPages }" var ="pno" step="1">
                <li><span ${pno==bookPage.page?"class='first-page'":""}>
                <a href="/booklist?p=${pno}">${pno }
                </a>
                </span></li>
            </c:forEach>
            
            <c:if test="${bookPage.hasNextPage ==true}">
                 <li><a href="/booklist?p=${bookPage.page +1 }">下一页</a></li>
            </c:if>
            
            <li><a href="/booklist?p=${bookPage.totalPages}$">尾页</a></li>
        </ul>
      </div>        
        
        
        <footer>
            Xiaoqing Ding-2020
        </footer>
    </body>
</html>

在第二个ajax请求处:

html 里面 

  + "<td><fmt:formatNumber pattern='$0.00' value= "+ price + "></fmt:formatNumber></td>"

这句话一直过不了

报错 

http://img1.sycdn.imooc.com//climg/5f1f13fa092dbf9c19611227.jpg我刚开始放入的 是 book.price这个变量, 格式是 Number 报这个错误,我认为是格式的问题,就建了一个变量 price ,格式是string, 也还是报这个错误。 除非我手动把 + price + 改成+ 3.33+ 这样才能读出来。 问下这个要怎么改呢? 是什么原因呢? 

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

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

4回答
好帮手慕小班 2020-07-29 15:35:45

同学你好,1、<fmt:formatNumber>是jstl标签,其实jstl就是用来替换Java代码的,避免代码和html标记混合在一起。

    2、这里老师测试了一下,确实在js中直接使用jstl标签时,会有一些拼接上的问题,这是因为这里是js中用的拼接后的内容,直接解析展示到页面中,但是jstl是直接使用在jsp页面中,所以会出现一些问题。

老师尝试当把拼接的内容,放在作用域中直接使用el表达式来获取,暂时可以解决这个问题,比如:

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

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

在页面中可以直接解析:

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

    3、这里暂时不建议直接在js中使用jstl标签,在js中,其实也可以使用js中的方法来格式化输出价格,同学如果有兴趣可以去了解一下。

    4、当前作业中,在js这个ajax中,同学先暂时写为+ "<td>" + parseFloat(book.price)+ "</td>"这样的格式。

如果我的回答解决了你的疑惑,请采纳!祝学习愉快!

好帮手慕小班 2020-07-29 10:12:17

同学你好,1、根据同学的描述,问题在第二个ajax请求处,此时只有当点查询时,才会触发这个ajax请求中的内容,所以同学说的-->但无论哪一个进去都报同一个错误,而且都不需要点查询,直接刷新就报错。  老师并没有理解。

报的同一个错误,是指一样的NumberFormatException 错误吗?

    2、parseFloat(book.price)可以正常的将获取到的内容转为数值Number类型,此时可以直接使用如下<fmt:formatNumbe>标签来读取输出一下,比如:

"<td><fmt:formatNumber pattern='$0.00' value= "+ parseFloat(book.price)+ "></fmt:formatNumber></td>"

同学可以暂时去掉 console.log这些内容。

Ps: 建议同学清理缓存后再来尝试重新启动一下服务,再来试试。

继续加油  祝:学习愉快~

  • 提问者 慕前端8369922 #1
    HTTP状态 500 - 内部服务器错误 消息 javax.servlet.ServletException: javax.servlet.jsp.JspException: In &lt;formatNumber&gt;, value attribute can not be parsed into java.lang.Number: "+ parseFloat(book.price)+ " 根本原因。 java.lang.NumberFormatException: For input string: "+ parseFloat(book.price)+" 对的的确是在ajax请求处,但是我只要把 <fmt:formatNumber>这个标签放进去,然后Value里面只要放入任何除了 “3.3"这类直接数字的变量,刷新以后就会报上面的服务器500,并不需要我使用这个请求,并且 // + "<td><fmt:formatNumber pattern='$0.00' value= "+ parseFloat(book.price)+ "></fmt:formatNumber></td>" 这么注释掉也不可以,/**/多行注释也不行, 只要在里面刷新页面服务器就直接报上面那个错误。 除非我改成这样 + "<td><fmt:formatNumber pattern='$0.00' value= "3.33 "></fmt:formatNumber></td>" 或者 + "<td>" + parseFloat(book.price)+ "</td>"
    2020-07-29 10:29:31
好帮手慕小班 2020-07-28 14:43:15

同学你好,1、book.price 可以正确输出价格的内容,同学就可以直接使用book.price 来获取数据。

    2、在ajax中,直接获取的book.price 是String类型,并不能直接转为数值类型,同学可以尝试使用parseFloat转换:

parseFloat(book.price)

将数据转为数值类型,再来尝试一下。

如果我的回答解决了你的疑惑,请采纳!祝学习愉快!

  • 提问者 慕前端8369922 #1
    老师 还是报错。 var price = book.price + ""; var price1 = 3.33; console.log( typeof book.price); console.log( typeof price); console.log( typeof price1); console.log(typeof parseFloat(book.price)); 这里输出是 number string number number 但无论哪一个进去都报同一个错误 而且都不需要点查询,直接刷新就报错
    2020-07-29 06:50:24
好帮手慕小班 2020-07-28 12:13:52

同学你好,1、NumberFormatException -->数字格式转换异常,当试图将一个String转换为指定的数字类型,而该字符串确不满足数字类型要求的格式时,抛出这个异常。

    2、同学尝试先不使用<fmt:formatNumber>标签,先尝试直接使用${book.price}查看能否正常输出价格的内容,如果不能正常输出,同学可以检查一下传递过来的数据,如果可以正常输出,同学可以再次添加上<fmt:formatNumber>标签来试试。

    3、问一下同学这里的价格是可以正常输出的吗

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

如果可以,同学就可以排查一下是传参的问题了。

如果我的回答解决了你的疑惑,请采纳!祝学习愉快!

  • 提问者 慕前端8369922 #1
    老师如果直接使用${book.price} 结果输出全部是 NaN,以及老师说的那个地方我是可以成功输出的, + "<td>" + book.price + " </td>" 我这样子输入结果也可以成功输出, 但似乎我只要加上 <fmt:formatNumber > 这个标签无论往里面传什么值都报错 我建立了 三个变量 book.price var price1 = 3.33 var price = book.price + ""; 这三个任何一个进去都报上面那个错误,所以不是很理解我哪里出了错。
    2020-07-28 12:26:37
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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