CODEWITHSUNDEEP
ajaxjspspring-mvc
FeCH
FeCH

Reputation: 133

Passing html value to spring mvc controller using ajax call

I need to pass the values of #question, and #answer to my spring mvc controller using ajax. current question returns "" and answer returns null when I check their values inside controller.

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

Controller:

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

Upvotes: 1

Views: 1421

Answers (1)

Anish Goyal
Anish Goyal

Reputation: 2859

You're setting data to a string when you call JSON.stringify(). jQuery expects data to be a plain object OR a string, but assumes that if data is a string, it is a query string. You're giving it a JSON string. If you just use the plain object for data and remove "JSON.stringify", this code should work.

EDIT: The documentation for this function is here: http://api.jquery.com/jquery.ajax/

Note the section about data in the settings object.

Upvotes: 1

Related Questions