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;
          }
         
      });
    
}