jsp+servlet+ajax实现局部更新

最新推荐文章于 2025-08-12 21:03:53 发布

转载最新推荐文章于 2025-08-12 21:03:53 发布 · 166 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/bounceFront/p/5570356.html

文章标签：

#java #javascript #ViewUI

本文介绍了使用Ajax和jQuery实现页面局部更新的方法，解决了页面刷新回到初始状态的问题。通过具体的servlet和JavaScript代码示例，展示了如何加载特定标签的数据并更新页面元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前更新时一直都使用：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;
          }
         
      });
    
}