jsp+servlet+ajax实现局部更新
之前更新时一直都使用:window.location.reload()进行整个页面的更新。
但是遇到的问题是,页面会回到初始时的状态而不是最近点击的那一次状态。
实现局部更新的两者方式:
根据百度。。
1.使用ajax进行更新。
2.使用iframe.iframe中可以链接一个src='....jsp'类似于jsp的页面。
因为评价说用iframe会遇到许多适应性等问题,所以我采用的是ajax.
用的jquery的ajax.目前遇到有问题是$(#...)并没有反应,以后再解决。
servlet部分:
注意设置contentType在getwriter之前,设置如下,以免中文乱码。
response.setContentType("text/html;charset=utf-8"); ArrayList<Tags>taglist=Token.getAllTagInfo(); PrintWriter writer= response.getWriter(); writer.println("<Table style='margin-left:50px'>"); writer.println("<TR align='center'><TH>标签</TH></TR>"); for(int i=0;i<taglist.size();i++){ Tags tags=(Tags)taglist.get(i); writer.println("<TR align='center' id='mytest'>"); writer.println("<TD align='center' style='margin-top:20px;font-size:13px' onclick='getTagDetail("+tags.getTagid()+")'>"+tags.getTagname()+"</TD>"); writer.println("</TR>"); } writer.println("</Table>");
ajax:
function getTagDetail(i){ // alert(i); var url="../getTagDetail"; var data={tagid:i}; $.ajax({ type:"get", async:true, url:url, data:data, success:function(datas){ // alert(datas); var mydiv=document.getElementById("right"); // alert(mydiv.innerHTML); mydiv.innerHTML=datas; // alert($("#showpeolpe").innerHTML); /// alert($("table.altrowstable").text()); //$("table.altrowstable").innerHTML=datas; } }); }