Spring MVC + Ajax JSON投稿

Question

ControllerにJSONを送信する際に問題があります。私は自分の問題を理解できません。だから、

、URL - /notes/{username}/add

アヤックス：

$.ajax({ 
     type: "POST", 
     contentType : 'application/json; charset=utf-8', 
     dataType : 'json', 
     url: window.location.pathname, 
     data: JSON.stringify({ title: $("#title").val(), text: $("#text").val() }), 
     success : function() { 
      $("#title").val(""); 
      $("#text").val(""); 
     } 
    }); 

コントローラー：

@RequestMapping(value = "/{username}/add", method = POST) 
    public void add(@RequestBody Note note) { 
     noteRepository.add(new Note(UserSession.getUser(), note.getTitle(), note.getText())); 
    } 

注：

public class Note { 

    private String title; 
    private String text; 

    public String getTitle() { 
     return title; 
    } 

    public void setTitle(String title) { 
     this.title = title; 
    } 

    public String getText() { 
     return text; 
    } 

    public void setText(String text) { 
     this.text = text; 
    } 
} 

コントローラはajaxからのリクエストを取得しません。私は、URLの問題だと思っていますが、私はなぜ、何をすべきなのでしょうか。

Answer 1

としてあなたcontrollerを変更します。

@RequestMapping(value = "{username}/add", method = RequestMethod.POST) 
public void add(@RequestBody Note note, @PathVariable("username")String username) { 
} 

そして、あなたのAJAX呼び出しのURLのようにパス変数を含める必要があります。

$.ajax({ 
     type: "POST", 
     contentType : 'application/json; charset=utf-8', 
     dataType : 'json', 
     url : '/Notes/notes/username/add', 
     data: JSON.stringify({ title: $("#title").val(), text: $("#text").val() }), 
     success : function() { 
      $("#title").val(""); 
      $("#text").val(""); 
     } 
    }); 

また下記、お使いのpom.xmlまたはbuild.gradleジャクソン依存性を持つべきであることを確認してくださいですプロジェクトの例：

<dependency> 
    <groupId>org.codehaus.jackson</groupId> 
    <artifactId>jackson-mapper-asl</artifactId> 
    <version>1.9.13</version> 
</dependency> 
<dependency> 
    <groupId>com.fasterxml.jackson.core</groupId> 
    <artifactId>jackson-databind</artifactId> 
    <version>2.5.3</version> 
</dependency> 

Answer 2

代わりにこの

data: JSON.stringify({ title: $("#title").val(), text: $("#text").val() }), 

のようなデータを作成するあなたは）この

$.ajax({ 
      var formdata = $('#yourformname').serializeArray(); 
      type: "POST", 
      contentType : 'application/json; charset=utf-8', 
      dataType : 'json', 
      url : '/Notes/notes/username/add', 
      data: formdata, 
      success : function() { 
       $("#title").val(""); 
       $("#text").val(""); 
      } 
     } 

を行うアヤックスではこの

<form name-"yourformname" id="formname"> 
<input type="text" id="title" name=="title"/> 
<input type = "text" id="text" name="text"/> 
</form> 
<input type="button" value="Submit"/> 

のようなあなたのHTMLフォームをseralize試すことができます。

モデル

public class Note { 

    private String title; 
    private String text; 

    public String getTitle() { 
     return title; 
    } 

    public void setTitle(String title) { 
     this.title = title; 
    } 

    public String getText() { 
     return text; 
    } 

    public void setText(String text) { 
     this.text = text; 
    } 
} 

@RequestMapping(value = "/{username}/add", method = POST) 
@ResponseBody 
     public void add(Note note) { //In note instance you will get the json data 
      //your code 
     }