今天做了一个用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标签是不能注释成功的