JSPにAjax PUTへのjsonの応答をELによって解析するようにリダイレクトする

Question

背景の最初のビット： （私は学生ですので、私と一緒にご負担ください） jQueryを使用して、私はAjax PUTリクエストを作成しました。 REST Webサービス。

$.ajax({ 
    type: "PUT", 
    url: putURI, 
    dataType: "json", 
    cache: false, 
    headers: {   
     Accept : "application/json; charset=utf-8",   
     "Content-Type": "application/json; charset=utf-8" 
    }, 
    success: function(){ 
     $.getJSON(baseURI, function(data){ 
      $.each(data, function (i, task) { 
       alert(task.description); 
       row = "<tr><td id='" + task.description + "'></td></tr>"; 
       $("#tasksTableBody tr:last").after(row); 
      }); 
     }); 
    }, 
    error: function (request, status, error) { 
     alert(request.responseText); 
     alert(status); 
     alert(error); 
    } 
}); 

可能であれば、私はそれらを配置したい場所をELとJSTLが正確に表の行を作成するためにある私のJSPへの応答を再ルーティングしたいと思います。

<tbody id="tasksTableBody"> 
    <core:forEach items="${allTasks}" var="task"> 
    <tr> 
     <td id="desc${task.id}"> 
      ${task.description} 
     </td> 
     <f:parseDate value="${duedate}" pattern="yyyy-MM-dd" var="duedate" /> 
     <td id="due${task.id}" value=duedate> 
      <f:parseDate value="${duedate}" pattern="yyyy-MM-dd"/> 
     </td> 
     <td id="done${task.id}" data-isDone="${task.isdone}"> 
      <core:set var="isdone" value="${task.isdone}"/> 
      <core:if test="${isdone == true}"> 
      <img src="images/checked.png"/> 
      </core:if> 
     </td> 
     <td> 
     <img src="images/edit-icon.png" onclick="editItem(${task.id})" /> 
     </td> 
     <td> 
     <img src="images/delete.png" onclick="deleteItem(${task.id})" /> 
     </td> 
    </tr> 
    </core:forEach> 
    </tbody> 

これも可能ですか、「成功」機能に固執して機能させる必要がありますか？

Answer 1

JSONとは対照的に、HTMLを返すことは有効なアプローチであり、クライアント側でJSONを処理するよりも簡単なことがよくあります。

あなたのコントローラ/サーブレットがJSPに転送するPU​​Tを処理してから、JQueryを使用して返されたHTMLでいくつかの要素を更新してください。これは次のようになります：

$.ajax({ 
    type: "PUT", 
    url: putURI, 
    dataType: "json", 
    cache: false, 
    headers: {   
     Accept : "application/json; charset=utf-8",   
     "Content-Type": "application/json; charset=utf-8" 
    }, 
    success: function (html){ 
     $("#results").append(html); //append response to an element with id 'results' 

     // or 

     $("#results").html(html); //replace contents of element with id 'results' 
    }, 
    error: function (request, status, error) { 
     alert(request.responseText); 
     alert(status); 
     alert(error); 
    } 
});