Jquery Spring Ajax/Json用户更新表单

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

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

我正在基于Spring框架构建这个web应用程序。 这是到目前为止我的JSP页面。。对于测试，我只制作了一个名为ajaxtesting的按钮，尽管我真的希望我的“update”按钮实例化一个模式并加载用户信息

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

$（文档）.ready（函数（）{
$（“#加载用户”）。单击（函数（）{
var personId=+$（'#loadUser'）.val（）；
$.get（'${pageContext.request.contextPath}/SDP_v1.2_JSON_TEST/ajaxTest/'+personId，函数（用户）{
$（'personIdResponse'）.text（user.name+，=username'+user.username）；
});
});
});

这是我的控制器：

@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";
    }

}

@RequestMapping（“/viewUser”）
公共字符串updateUser（模型模型@RequestParam（value=“id”，required=false）整数id）{
User User=usersService.getUser（id）；
model.addAttribute（“用户”，用户）；
返回“设置”；
}
@请求映射（“/ajaxTest”）
@应答器
公共用户ajaxTest（@RequestParam（value=“id”，required=false）整数id）{
返回usersService.getUser（id）；
}
@请求映射（“/updateUser”）
公共字符串更新器（模型、用户）{
usersService.updateUser（用户）；
getUsers（模型）；
返回“用户”；
}
@安全（“角色\管理员”）
@请求映射（“/deleteUser”）
公共字符串deleteUser（模型，
@RequestParam（value=“id”，required=false）整数id）{
if（id==null）{
List users=usersService.getUsers（）；
model.addAttribute（“用户”，用户）；
返回“用户”；
}否则{
usersService.delete（id）；
List users=usersService.getUsers（）；
model.addAttribute（“用户”，用户）；
返回“用户”；
}
}

---

<>我不能在“

中显示的设置文本中得到任何内容。请考虑JQuyYUI对话表单。参见示例

您的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>

---

更新：

我注意到问题中有更多的代码

第一个问题，你真的不应该给更新提供

id

，删除超链接。由于它们在许多行中重复，因此您将拥有具有重复的

id

的DOM元素。因此，请考虑使用<代码>类< /代码> .< 然后，以下是如何使用来自服务器的数据填充对话框表单

$(".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');
              });
    });

---

请考虑JQuyYUI对话框表单。参见示例

您的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>

---

更新：

我注意到问题中有更多的代码

第一个问题，你真的不应该给更新提供

id

，删除超链接。由于它们在许多行中重复，因此您将拥有具有重复的

id

的DOM元素。因此，请考虑使用<代码>类< /代码> .< 然后，以下是如何使用来自服务器的数据填充对话框表单

$(".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');
              });
    });

---

您可以自己尝试一下，然后在这里发布代码。Stack Overflow的Q&A模型实际上不能作为搜索工具进行扩展。你试过谷歌搜索吗？如果是这样的话，把你在帖子中发现的内容包括在内。你发现了什么，为什么没有回答你的问题？我一直在想从哪里开始，是使用JSON还是AJAX？JSON是JavaScript对象表示法。它只是一个包装器，而AJAX是一种通常使用XML但可以使用JSON的技术。由于JavaScript默认解析JSON，因此JSON可能是更好的答案。听起来你只需要一个RESTful URL，你可以通过jQueryAjax点击它来获取JSON格式的数据，这样你就可以使用jQueryModal插件来构建窗口，然后简单地解析JSON并填充它。如果你从那开始，你很可能会被卡住。当你这样做的时候，你应该用你的进度编辑这篇文章。现在，这太宽泛了，无法回答。希望这有帮助这是一个很好的答案！我会试一试，看看我会怎么做。谢谢，你可以自己试试，然后在这里发布你的代码。Stack Overflow的Q&A模型实际上不能作为搜索工具进行扩展。你试过谷歌搜索吗？如果是这样的话，把你在帖子中发现的内容包括在内。你发现了什么，为什么没有回答你的问题？我一直在想从哪里开始，是使用JSON还是AJAX？JSON是JavaScript对象表示法。它只是一个包装器，而AJAX是一种通常使用XML但可以使用JSON的技术。由于JavaScript默认解析JSON，因此JSON可能是更好的答案。听起来你只需要一个RESTful URL，你可以通过jQueryAjax点击它来获取JSON格式的数据，这样你就可以使用jQueryModal插件来构建窗口，然后简单地解析JSON并填充它。如果你从那开始，你很可能会被卡住。当你这样做的时候，你应该用你的进度编辑这篇文章。现在，这太宽泛了，无法回答。希望这有帮助这是一个很好的答案！我会试一试，看看我会怎么做。谢谢这太好了，这正是我要找的！我唯一不清楚的是，当表单弹出时，如何将每个单独的用户信息加载到表单中。此时，当单击

更新
按钮时，它会被控制器处理，然后被分派到另一个显示表单的页面。除此之外，您还可以修改