ボタンをクリックしてページの一部をリロードする、新しいURLでページ全体を更新する

Question

私は単一のページSpring MVCアプリケーションを作成しています。

要件：

1. 私はそれが入力されたURLに応じてページの状態を変更したいです。
2. ボタンのクリックでページの状態を変更したいと思います。

例のユースケース：

1. 私はURL "my.site.com/" を入力した場合、私は私のサイトの骨格はUserのデータはありませんし、ロードすることにしたいです。 （Userは私のモデルのオブジェクトです）。

2. 私はURL「my.site.com/users/John」を入力した場合、私は（ページがをリロードすることができます）、「ジョン」のデータを表示させたいです。私はtextboxに文字列「ジョン」と入力し、ボタンGo!をヒットした場合

3. は、私は、ユーザーのデータを表示するページの一部だけがリフレッシュと再読み込みないページ全体になりたいです。

デザインの質問：

は私が1）と2）のために、私は新しいModelAndViewオブジェクトを返す必要があることを理解し、そして3）のために私はAJAXを使用することができます。これは、おそらく3つのコントローラメソッドが必要であることを意味します。私にはわからない何

は矛盾のURL MVCやAJAXコントローラ方法、およびどのように実際には、その後のJavascriptから私のAJAXコントローラメソッドを呼び出すことではなく、ModelAndViewコントローラメソッドの間を回避する方法です。

コード例：

私が必要になりますこれは、もちろん、矛盾のURLを引き起こすことを除いて、このようなものです。

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

$.getJSON("https://stackoverflow.com/users/"+user, function() { 
    //... 
}); 

注：そう感じてください、それが最適//不十分//間違っていない可能性が達成しようとする私の方法私は、このようなPOJOをフェッチしますJavaScriptで

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

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

/* 
* View for a specific user. 
*/ 
@RequestMapping(value = "https://stackoverflow.com/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 = "https://stackoverflow.com/users/{username}", produces = "application/json", method = RequestMethod.GET) 
public @ResponseBody User getTime(@PathVariable(value = "username") String username) { 
    return new User(username); 
} 

どのようにそれを行うには他の方法を提案することも自由です。

コード例とともに私に説明してください。私は何が必要なのでしょうか？

Answer 1

コントローラにはさまざまな方法を使用できます。 例： @RequestMapping(value = "/users")および@RequestMapping(value = "https://stackoverflow.com/users/{username}") - GETメソッドがあります。

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

をそしてJSは、このようななめらかになります：しかし、AJAXのためにPOSTでコントローラーを作る（それはあなたの状況で可能の場合）

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

別のアドバイス - あなたの残りのためのURLを変更します。例えば。 URLにapiという単語を追加します。