在我的 JSP 页面中，我有一个 Accordion 列表(我使用 Bootstap 3)，每个列表内部都有一些文本和一个删除按钮。当用户按下删除按钮时，列表中的该特定节点将被删除。为了构建 Accordion 列表，我将一个 ArrayList 对象导入到 JSP，其中包含我想要的文本。所以我有:

//myNotif is the imported object 
ArrayList<MyNotifications> myNotif= (ArrayList<MyNotifications>(session.getAttribute("myNotif")); 
 
//here i build the accordion list 
<div class="row"> 
 <div class="col-md-7"> 
   <div class="panel-group" id="accordion"> 
      <%int i=0; for(MyNotifications notiff:myNotif ) { %> 
      <div class="panel panel-default"> 
          <div class="panel-heading"> 
               <h4 class="panel-title"> 
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse<%=i%>"> 
                    Notification <%=i%></h4> 
           </div> 
           <div id="collapse<%=i%>" class="panel-collapse collapse "> 
                <div class="panel-body"> 
                     <%=notiff.getNotification()%> //method that returns text 
                     <p><a onclick="DeleteNotification()" class="btn  btn-primary btn-study-right fat-btn " role="button">Delete</a></p> 
                 </div> 
                </div> 
         </div> 
         <%i++;}%> 
    </div>                 
  </div> 
</div> 

现在我想通知 servlet 进行删除操作，并更新节点。所以我用ajax编码了这个

<script> 
   function DeleteNotification(){ 
      var xmlhttp; 
      if (window.XMLHttpRequest) 
      {// code for IE7+, Firefox, Chrome, Opera, Safari 
          xmlhttp=new XMLHttpRequest(); 
      }else{// code for IE6, IE5 
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
           } 
 
      xmlhttp.open("GET","MyServlet?action=DeleteNotif",true); 
      xmlhttp.send(); 
 
   } 
</script> 

这有效，我的意思是 serlvet 已更新并且它更新了对象 myNotif。但我不知道如何仅通过jsp刷新这部分..

请您参考如下方法:

But I don't know how to refresh this part the jsp only..

此时它不再是 JSP，因为它已发送到客户端，现在只是常规 HTML。因此，您可以在 Javascript 中使用 DOM 操作来完成此操作。

但是您缺少 Ajax 的一个重要部分，即设置一个指向函数的响应处理程序:

xmlhttp.onreadystatechange = ajaxSuccessFunc; //function name can be whatever you want, you must define the function 
xmlhttp.send(); 

然后定义响应处理程序，并使其对从服务器收到的响应执行某些操作，例如覆盖页面上特定元素的innerHTML:

function ajaxSuccessFunc() 
{ 
    if (xmlhttp.readyState == 4) 
    { 
        if (xmlhttp.status == 200) 
        { 
            var data = xmlhttp.responseText; 
            document.getElementById('accordion').innerHTML = data; 
        } 
    } 
} 

我曾经像你一样手动编写我的 Ajax 代码，但是如果你使用 JQuery (一个流行的 javascript 库)代码变得这么短:(各种浏览器差异的所有内容都为您处理。)

 function DeleteNotification() 
 { 
         $.ajax({ 
             type : "GET", 
             url : "MyServlet", 
             data : { 
                 'action' : 'DeleteNotif' 
             }, 
             success : function(data) 
             { 
                 $("#accordion").html(data); 
             } 
         }); 
 }