title: Sending form using Ajax - Spring MVC
body: <p>I have problems with sending my form using Ajax.</p>
  
  <p>Here is form:</p>
  
  <pre><code>&lt;form method="POST" id="add-card-form" action="${pageContext.request.contextPath}/card/add" class="form-horizontal"&gt;
   &lt;select name="type" class="form-control"&gt;
      &lt;c:forEach items="${cardTypes}" var="cardType"&gt;
         &lt;option value="${cardType.id}"&gt;${cardType.name}&lt;/option&gt;
      &lt;/c:forEach&gt;
   &lt;/select&gt;
   &lt;select name="category" class="form-control"&gt;
      &lt;c:forEach items="${cardCategories}" var="cardCategory"&gt;
         &lt;option value="${cardCategory.id}"&gt;${cardCategory.name}&lt;/option&gt;
      &lt;/c:forEach&gt;
   &lt;/select&gt;
  &lt;textarea type="text" name="description" class="form-control" rows="6"&gt;&lt;/textarea&gt;
   &lt;input type="submit" id="add-card-submit" value="Add card" class="btn btn-primary"/&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here is Ajax function:</p>
  
  <pre><code>$(document).on('submit', '#add-card-form', function(e) {
      var frm = $('#add-card-form');
      e.preventDefault();
  
      var Form = this;
      var data = {};
  
      $.each(this, function(i, v){
          var input = $(v);
          data[input.attr("name")] = input.val();
          delete data["undefined"];
      });
  
      //temporary solution
      data["type"] = parseInt(data["type"]);
      data["category"] = parseInt(data["category"]);
  
      console.log(data);
      if(frm.valid()) {
          $.ajax({
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              type: frm.attr('method'),
              url: frm.attr('action'),
              data: JSON.stringify(data),
              success:  reloadBoard,
              error: function (callback) {
                  console.log(callback);
              }
          });
  
          refreshForm(frm);
      }
  });
  </code></pre>
  
  <p>And here is a controller action:</p>
  
  <pre><code>@RequestMapping(value="/add", method = RequestMethod.POST)
  public @ResponseBody Card addCard(@RequestBody Integer type,
                                    @RequestBody Integer category,
                                    @RequestBody String description) {
  
      Card card = new Card();
  
      card.setType(cardTypeService.findById(type));
      card.setCategory(cardCategoryService.findById(category));
      card.setDescription(description);
      card.setOwner(1);
  
      cardService.saveCard(card);
  
      System.out.println("Card with id " + card.getId() + " added!");
  
      return card;
  }
  </code></pre>
  
  <p>Variable data values:</p>
  
  <pre><code>Object {type: 1, category: 1, description: "New Card"}
  </code></pre>
  
  <p>When I try to send this form I always get error 400: <code>http://localhost:8080/card/add 400 (Bad Request)</code></p>
  
  <p>Can you tell me what is wrong with this code? I've ridden few posts, articles about sending data using Spring MVC + Ajax but no one helped.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I changed @RequestBody into three @RequestParams:</p>
  
  <pre><code> @RequestMapping(value="/add", method = RequestMethod.POST)
  public @ResponseBody Card addCard(@RequestParam("type") Integer type,
                                    @RequestParam("description") String description,
                                    @RequestParam("category") Integer category) {
  </code></pre>
  
  <p>I still get 400 error. Here is raw HTTP request: </p>
  
  <p><code>POST /card/add HTTP/1.1
  Host: localhost:8080
  Connection: keep-alive
  Content-Length: 48
  Cache-Control: no-cache
  Pragma: no-cache
  Origin: http://localhost:8080
  X-Requested-With: XMLHttpRequest
  Content-Type: application/json; charset=UTF-8
  Accept: application/json, text/javascript, */*; q=0.01
  User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36
  Referer: http://localhost:8080/
  Accept-Encoding: gzip,deflate,sdch
  Accept-Language: pl-PL,pl;q=0.8,en-US;q=0.6,en;q=0.4
  Cookie: JSESSIONID=ABAD895C419A9175EAB4D0833C543724</code></p>
  
  <p>And data object: </p>
  
  <pre><code>category: 1
  description: "New Card"
  type: 1
  </code></pre>