Spring Ajax/Json用户更新表格

Question

基本上到目前为止，我有一个JSP页面，管理员可以在一个简单的表格中查看所有当前注册用户。然后，管理员可以在点击特定表格行'更新'按钮时更新用户信息（权限，电子邮件等）。

我想知道如何使屏幕上弹出的模式出现在屏幕上，并显示当前的用户信息，而不是将其重定向到另一个页面并购买表单。是否有很好的教程展示了如何实现这种类型的功能？

我正在构建基于Spring框架的这个Web应用程序。 这是我到目前为止的JSP页面。对于测试，我只是做了一个名为Ajax Testing的按钮，虽然我真的想要“更新”按钮来实例化一个模式并加载用户信息。

<c:forEach var="user" items="${users}"> 
     <tr> 
      <td><c:out value="${user.id}" /></td> 
      <td><c:out value="${user.name}"/></td> 
      <td><c:out value="${user.username}"/></td> 
      <td><c:out value="${user.email}"/></td> 
      <td><c:out value="${user.dob}"/></td> 
      <td><c:out value="${user.authority}"/></td> 
      <td> 
       <a id="update" href="<c:url value="/viewUser"><c:param name="id" value="${user.id}"/></c:url>"><button>Update</button></a> 
      </td> 
      <td> 
       <a id="delete" href="<c:url value="/deleteUser"><c:param name="id" value="${user.id}"/></c:url>"><button>Delete</button></a> 
      </td> 
      <td> 
       <a id="loadUser" href="<c:url value="/ajaxTest"><c:param name="id" value="${user.id}"/></c:url>"><button>Ajax Test</button></a> 
      </td> 
     </tr> 
    </c:forEach> 
</table> 
<div id="personIdResponse"> </div> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#loadUser").click(function(){ 
      var personId = +$('#loadUser').val(); 
      $.get('${pageContext.request.contextPath}/SDP_v1.2_JSON_TEST/ajaxTest/' + personId, function(user) { 
        $('#personIdResponse').text(user.name + ', = username ' + user.username); 
       }); 
     }); 
    }); 
</script> 

这是我的控制器：

@RequestMapping("/viewUser") 
public String updateUser(Model model, @RequestParam(value = "id", required = false) Integer id) { 

    User user = usersService.getUser(id); 

    model.addAttribute("user", user); 

    return "settings"; 
} 

@RequestMapping("/ajaxTest") 
@ResponseBody 
public User ajaxTest(@RequestParam(value = "id", required = false) Integer id) { 
    return usersService.getUser(id); 
} 

@RequestMapping("/updateUser") 
public String updateUser(Model model, User user) { 

    usersService.updateUser(user); 
    getUsers(model); 
    return "users"; 
} 

@Secured("ROLE_ADMIN") 
@RequestMapping("/deleteUser") 
public String deleteUser(Model model, 
     @RequestParam(value = "id", required = false) Integer id) { 

    if (id == null) { 
     List<User> users = usersService.getUsers(); 

     model.addAttribute("users", users); 
     return "users"; 
    } else { 
     usersService.delete(id); 

     List<User> users = usersService.getUsers(); 

     model.addAttribute("users", users); 
     return "users"; 
    } 

} 

我不能在

Answer 1

请考虑jQueryUI的对话框形式显示的集文本什么。见示例here。

你的HTML是：

<div id="dialog-form" title="user update"> 
<form> 
    <fieldset> 
    <label for="name">Name</label> 
    <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" /> 
    ... some other properties 
    </fieldset> 
</form> 
</div> 

您的JavaScript：

$("btn.update") 
    .click(function() { 
    $("input#name").val('the name of the user'); // you should be able to retrieve the info or id based on the row. Use changed selectors like closest("tr").find("td").eq(2)... 
    $("#dialog-form").dialog("open"); 
    }); 

---

UPDATE：

我注意到更多的代码已经被张贴在的问题。

第一个问题，你真的不应该给id更新，删除超链接。由于它们在许多行中重复，因此您将拥有重复的DOM元素id。所以，请考虑使用class。

然后，这里是如何填充对话框窗体与服务器的数据。

$(".loadUser").click(function(e){ 
     e.preventDefault(); // to cancel the default hyperlink behavior. 
     var personId = +$(this).val(); // obtain the user Id. 
     $.get('${pageContext.request.contextPath}/SDP_v1.2_JSON_TEST/ajaxTest/' + personId) 
      .done(function(user) { 
        // populate the dialog form with data retrieved. 
        $("input#name").val(user.username); 
        ... 

        // display the dialog form 
        $("#dialog-form").dialog("open"); 
       }) 
       .fail(function(user) { 
        alert('could not load user'); 
       }); 
    });