2017-03-19 4 views
1

ajaxを使用して#questionの値と#ACK をspring mvcコントローラに渡す必要があります。 現在の質問は ""を返し、コントローラ内の値をチェックすると答えはnullを返します。ajax呼び出しを使用してspring mvc controllerにhtml値を渡します。

のjsp:

 <form class="form-horizontal" role="form" id="add-form"> 
      <div class="form-group"> 
       <label for="question" class="col-md-4 col-sm-4 col-xs-12 control-label"> 
        Question: 
       </label> 
       <div class="col-md-4 col-sm-6 col-xs-12"> 
        <textarea class="add-form form-control" path="question" rows="5" id="question" name="question"></textarea> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="question" class="col-md-4 col-sm-4 col-xs-12 control-label"> 
        Answer: 
       </label> 
       <div class="col-md-4 col-xs-12 col-sm-6"> 
        <textarea class="container add-form form-control" path="answer" rows="5" id="answer" name="answer"/></textarea> 
       </div> 
      </div> 
      <div class="form-group"> 
       <div class='col-md-offset-4 col-md-4 col-sm-offset-4 col-sm-4'> 
        <button type='submit' id='create-button' class='btn btn-default'> 
         Create Card 
        </button> 
       </div> 
      </div> 
     </form> 

JS:

function addCard(){ 
$('#message').empty(); 

$.ajax({ 
    type: 'POST', 
    url: 'createCard', 
    data: JSON.stringify({ 
     question: $('#question').val(), 
     answer: $('#answer').val() 
    }), 
    headers: { 
     'Accept': 'application/json', 
     'Content-Type': 'application/json' 
    }, 
    'dataType': 'json', 
    success: function(){ 
     $('#question').val(''); 
     $('#answer').val(''); 
     $("#message").append("<b>A Card has been created Successfully</b>"); 
    }, 
    error: function(){ 
     $('#message').append("<b>FAIL!!!!</b>"); 
    } 
}); 
} 

コントローラ:文字列へ

@RequestMapping(value = "/createCard", method = RequestMethod.POST) 
@ResponseBody 
public String createCard(@RequestBody Map<String, String> cardMap) throws FCPersistenceException { 
    Card card = new Card(); 
    card.setQuestion(cardMap.get("question")); 
    card.setAnswer(cardMap.get("answer")); 
    card.setCurrPeriod(Period.ZERO); 
    dao.addCard(card); 
    return "redirect:/add/displayCreateCard"; 
} 

答えて

1

あなたが設定しているデータは、これにはJSON.stringify()を呼び出すとき。 jQueryは、データが単純なオブジェクトまたは文字列であることを想定していますが、データが文字列の場合はクエリ文字列とみなします。あなたはそれにJSON文字列を与えています。データに単純なオブジェクトを使用して "JSON.stringify"を削除するだけの場合、このコードは機能するはずです。

EDIT:この関数のドキュメントはここにある:http://api.jquery.com/jquery.ajax/

注設定オブジェクト内のデータに関するセクション。

関連する問題