Question

我有一个像这样的JSP页面

<li id="notifications">
    <c:choose>
        <c:when test="${empty alerts}">
          <p class="text-default">There are no Service Reminders at this time</p>
        </c:when>
        <c:otherwise>
           <c:forEach items="${alerts}" var="alert">
            <p class="text-default">${alert.serviceItemDescription}</p>
             </c:forEach>
          <button onclick="clearNotifications()" id="clearButton" >clear
       </button>
         </c:otherwise>
    </c:choose>
</li>

属性{alerts}是一个列表。
我想基于我从以下代码获得的AJAX响应更新此现有列表。
AJAX“result”是一个新的迭代列表。如何通过以下代码中的新值“结果”更新现有模型属性“警报”以更新“list”标记元素？

< script type = "text/javascript" >
  function clearNotifications() {
    $.ajax({
        type: "POST",
        url: "/clearNotifications/" + $ {
          bike.id
        },
        headers: {
          "Accept": "text/html,application/json"
        },
        success: function(result) {
          $("#notifications").html(result);
        }
      }
    });
} </script>

Answer 1

你能试试吗，

在您的Jsp中，更改li，如下所示，

<li id="notifications">

</li>

你可以玩js，特别是在ajax中，

这是最初的页面加载，

<script type="text/javascript">

    $(document).ready(function() {
        alerts = ${alerts};
        populateNotification();
    });

function populateNotification(alerts)   {

    for(var i=0; i<alerts.length; i++){
        $("#notifications").html("<p class='text-default'>${alerts[i].serviceItemDescription}</p>");        
    }

    $("#notifications").append("<button onclick='clearNotifications()' id='clearButton' >clear     </button>");
}

这是针对Ajax调用的，

function clearNotifications() {
    $.ajax({
        type: "POST",
        url: "/clearNotifications/" + $ {
          bike.id
        },
        headers: {
          "Accept": "text/html,application/json"
        },
        success: function(result) {
          //$("#notifications").html(result);
          alerts = result;
          populateNotification(alerts);
        }
      }
    });
</script>

如何从AJAX响应更新JSP中的模型属性？

1 个答案: