javascript - 使用 ajax 更新 JSP 页面中的对象

Question

在我的 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刷新这部分..

Answer 1

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