javascript - 单击按钮重新加载部分页面，使用新 URL 刷新整个页面

Question

我正在编写一个单页 Spring MVC 应用程序。

要求:

1. 我希望它根据输入的 URL 更改页面的状态。
2. 我希望它通过单击按钮来更改页面的状态。

示例用例:

1. 如果我输入 URL“my.site.com/”，我只想加载我的网站框架，而不加载用户的数据。 (User 是我模型中的一个对象)。

2. 如果我输入网址“my.site.com/users/John”，我希望显示“John”的数据(页面可以重新加载)。

3. 如果我在文本框中输入字符串“John”，然后点击Go!按钮，我只希望页面中显示用户数据的部分已刷新并且未重新加载整个页面。

设计问题:

据我了解，对于1)和2)，我需要返回一个新的ModelAndView对象，对于3) 我可以使用AJAX。这可能意味着我需要三个 Controller 方法。

我不知道的是如何避免 MVC 和 AJAX Controller 方法之间的 URL 冲突，以及如何实际从 Javascript 调用我的 AJAX Controller 方法，而不是 ModelAndView Controller 方法。

代码示例:

我需要的是这样的东西，当然，这会导致网址冲突。

/*
 * Default view.
 */
@RequestMapping(value = "/users")
public ModelAndView displayDefault() {

    return new ModelAndView("userdisplay_default.jsp");
}

/*
 * View for a specific user.
 */
@RequestMapping(value = "/users/{username}")
public ModelAndView displaySpecific(@PathVariable(value = "username") String username) {
    User user = new User(username);

    return new ModelAndView("userdisplay_specific.jsp", "Specific User", user);
}

/*
 * AJAX controller method.
 */
@RequestMapping(value = "/users/{username}", produces = "application/json", method = RequestMethod.GET)
public @ResponseBody User getTime(@PathVariable(value = "username") String username) {
    return new User(username);
}

在 Javascript 中，我将像这样获取 POJO:

// obtain user
var user = $('#user_input').val(); // this is a text input

$.getJSON("/users/"+user, function() {
    //...
});

注意:我尝试实现这一目标的方法可能是错误的//不足//不是最佳的，所以请随意建议一些其他方法来实现这一点。

您能否给我一个解释以及代码示例，如何完成我需要的工作？

Answer 1

您可以为 Controller 制定不同的方法。例如:@RequestMapping(value = "/users") 和 @RequestMapping(value = "/users/{username}") - 有 GET 方法。但对于 AJAX 使用 POST 制作 Controller :

@RequestMapping(value = "/users/{username}", produces = "application/json", method = RequestMethod.POST)

JS 会是这样的:

// Send the request
$.post("/users/"+user, data, function(response) {
    // Do something with the request
});

另一个建议(如果在您的情况下可能的话)- 重命名您的其余网址。例如。将单词 api 添加到 URL 中。