title: How to automatically parse spring form data to json object? (Spring, jQuery, AJAX, JSON)
body: <p>I have a spring form that submits via ajax. Here is my form...</p>
  
  <pre><code>&lt;form:form action="addToCart" method="POST"
                  modelAttribute="cartProduct"&gt;
                  &lt;form:input type="hidden" path="product.productId"
                      value="${inventory.getProduct().getProductId()}" /&gt;
                  &lt;div class="card-block" style="overflow: hidden; padding: 2%"&gt;
                      &lt;h5 style="white-space: nowrap"&gt;
                          &lt;a href="#" class="text-primary card-title"&gt;${inventory.getProduct().getName()}&lt;/a&gt;
                      &lt;/h5&gt;
                      &lt;p class="card-text text-danger"&gt;&amp;#8369;
                          ${inventory.getProduct().getPrice()}&lt;/p&gt;
                      &lt;p&gt;
                      &lt;div class="success-message-container"&gt;
                          &lt;span class="text-success add-to-cart"&gt;&lt;strong&gt;&amp;nbsp;&lt;/strong&gt;&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div class="success-message vertical-center"
                          style="display: none;"&gt;
                          &lt;span class="text-success add-to-cart"&gt;&lt;strong&gt;Added
                                  to cart!&lt;/strong&gt;&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;form:button id="addToCart" class="btn btn-block btn-warning"&gt;Add to cart&lt;/form:button&gt;
                      &lt;a id="viewCart" href="viewCart" class="btn btn-block btn-warning" style="display: none;"&gt;View cart&lt;/a&gt;
                  &lt;/div&gt;
  &lt;/form:form&gt;
  </code></pre>
  
  <p>Then it gets submitted via ajax code...</p>
  
  <pre><code>$(document).ready(function() {
  
  var form = $("form");
  var url = form.attr("action");
  var formMethod = form.attr("method");
  
  form.submit(function(event) {
  
      event.preventDefault();
  
      var thisForm = this;
  
      $.ajax({
  
          url : url,
          data : $(this).serialize(),
          type : "POST",
          headers: { 
              'Content-Type': 'application/json' 
          },
          success : function(cartProduct) {
              $(thisForm).find('.success-message-container').remove();
              $(thisForm).find('.success-message').show();
              $(thisForm).find('#addToCart').hide();
              $(thisForm).find('#viewCart').toggle();
          }
      });
  });
  
  });
  });
  </code></pre>
  
  <p>And here is the receiving rest controller...</p>
  
  <pre><code>@RequestMapping(value="/addToCart", method = RequestMethod.POST)
  public CartProduct addToCart(@RequestBody CartProduct cartProduct, HttpServletRequest request){
  
      System.out.println(cartProduct.getProduct().getProductId());
      return null;
  }
  </code></pre>
  
  <p>However, I keep on getting this error...</p>
  
  <pre><code>POST http://localhost:8080/tommystore/customer/addToCart 400 (Bad Request)
  </code></pre>
  
  <p>I have imported Jackson for automatic object mapping but it still does not work...</p>
  
  <pre><code>    &lt;dependency&gt;
          &lt;groupId&gt;com.fasterxml.jackson.core&lt;/groupId&gt;
          &lt;artifactId&gt;jackson-core&lt;/artifactId&gt;
          &lt;version&gt;2.6.3&lt;/version&gt;
      &lt;/dependency&gt;
  
      &lt;dependency&gt;
          &lt;groupId&gt;com.fasterxml.jackson.core&lt;/groupId&gt;
          &lt;artifactId&gt;jackson-databind&lt;/artifactId&gt;
          &lt;version&gt;2.6.3&lt;/version&gt;
      &lt;/dependency&gt;
  </code></pre>
  
  <p>How can I fix this?</p>