Question

在我的JSP页面中，我有一个手风琴列表（我使用Bootstap 3），每个列表中都有一些文本和一个删除按钮。然后，当用户按下删除按钮时，将删除该列表的特定节点。为了构建手风琴列表，我向JSP导入一个ArrayList对象，该对象包含我想要的文本。所以我有：

//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

但我不知道如何刷新这部分只是jsp ..

此时它不再是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);
             }
         });
 }

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

1 个答案: