关于JavaScript中使用c:forEach标签的问题

今天做了一个用ajax实现页面的功能，出现了点小问题，现在分享一下。

这是能够正常运行的代码

<script type="text/javascript">
var ul=$("#ulbox");
//存储当前页面
var curPage;
//存放所有页面
var total;
var end;
$(function(){
    sendPageAjax(1);
    
    $("#pre").click(function(){
        page=curPage==1?1:(curPage-1);
        sendPageAjax(page);
    });
    $("#next").click(function(){
        page=curPage==total?total:(curPage+1);
        sendPageAjax(page);
    });
    
});

//js不支持jsp中的jstl标签,在js中注释jstl标签会失败,使用js传递参数给jstl标签时,会默认把jstl标签当做是字符串
//使用同步加载是因为在窗口加载完成时会自动编译点击事件,异步加载的过程是相当于两个线程同时执行
//(一个执行访问servlet,一个继续执行后续代码),同步加载会
//在我们拿到数据的时候才会执行后面的代码,防止在加载id的点击事件时id会找不到
function sendPageAjax(page){
    $.ajax({
        type:"post",
        url:"../CakeServlet",
        async:false,
        data:{
            page:page
        },
        dataType:"json",
        success:function(obj){
            //console.log(obj);
            //从json中拿出数据并赋值
            curPage=obj.curPage;
            total=obj.total;
            
            ul.empty();
            $("#abox").empty();
            for(i in obj.list){
                var item=obj.list[i];
                var li="<li class='product-li'><div class='product-div'><div class='picture'><img src='"+item.Cake_img+"' /></div><div class='text1'><h1>"+item.Cake_Englishname+" <br /> "+item.Cake_Chinesename+"</h1><p>"
                +item.Cake_describe+"</p><h2>￥ "+item.Cake_price+"/1.2 "+item.Cake_unit+"<a class='clickbuy' href='../CakedetailServlet?img="+item.Cake_img+"&cakeid="+item.Cake_id+"'>立即购买</a></h2></div></div></li>";
                ul.append(li);
            }
        var a="";
        for(var j=1;j<=obj.total;j++){
            //显示页码并实现点击刷新页面商品
            a=a+"<a onclick='sendPageAjax("+j+")'>"+j+"</a>";
        }
        
        var el="<a id='pre'>上一页</a>"+a+"<a id='next'>下一页</a>";
         $("#abox").append(el);
        }
    });
}


</script>

刚开始出现的问题主要是在拼接标签的时,我使用了jstl标签实现

var el="<a  id='pre'>上一页</a><c:forEach  begin='1' end='"+total+"' step='1' var='n'><a onclick='sendPageAjax("+n+")'>"+n+"</a></c:forEach><a id='next'>下一页</a>";
		$("#abox").append(el);

在<c:foreach>中打算把end的值用获取到的参数进行传递拼接。报了下面的错误

刚开始以为是数字转换格式的异常。。后来查了一下才知道是因为在jstl标签中如果拼接了参数,会把整个的jstl标签转换为字符串,如果end里面传递的是一个数字在页面控制台打印出来如下

var a="<c:forEach  begin='1' end='3' step='1' var='n'><a onclick='sendPageAjax(n)'>n</a></c:forEach>";
		console.log(a);

总结:如果jstl标签中传递的是写死的数据是可以解析的，如果是参数则不行，还有在js页面使用注释符注释jstl标签是不能注释成功的

扫描二维码关注公众号，回复： 5000595 查看本文章

关于JavaScript中使用c:forEach标签的问题

猜你喜欢