title: Spring MVC: 415 (Unsupported Media Type) Error
body: <p>It is somewhat recurring issue and I have found few solutions.But none of it work for me.
  <br/>Trying to post a form with jQuery AJAX. </p>
  
  <blockquote>
    <p>Note: I posted it yesterday, thinking it is a client side issue. Tried
    everything possible on client side but no luck.</p>
  </blockquote>
  
  <p><strong>Spring Controller</strong></p>
  
  <pre><code>@RequestMapping(value="/save",method=RequestMethod.POST,consumes="application/json")
      @ResponseBody public String handleSave(@RequestBody String formData)
      {
  
  
          System.out.println(formData);
  }
  </code></pre>
  
  <p><strong>jQuery Request</strong>(Tried everything what people suggested in comments)<br/></p>
  
  <p>It works fine if I send <code>data:$(this).serialize()</code> and <code>contentType:application/json</code></p>
  
  <pre><code>$('form').submit(function () {
                      $.ajax({
                          url: $(this).attr('action'),
                          type: 'POST',
                          data: collectFormData(),
                          headers: {
                              "Content-Type":"text/xml"
                          },
                          dataType: 'xml;charset=utf-8',
                          success: function (data) {
                              alert('data:'+data)
                          },
                          error: function (jqXHR, textStatus, errorThrown) {
                              alert('jqXHR:'+jqXHR+'\n'+'textStatus:'+'\n'+textStatus+'errorThrown:'+errorThrown);
                          }
                      });
  
                      return false;
                  });
  </code></pre>
  
  <p><strong>collectFormData()</strong></p>
  
  <pre><code>function collectFormData()
              {
                  $rootElement = $.createElement($('form').attr('name'));
                  $('form').find('div.section').each(function(index, section) {
                      var $sectionElement = $.createElement($(section).attr('name'));
                      console.log('Section Name is:'+$sectionElement);
                      $(section).find('input').each(function(i, field) {
                          var $fieldName  = $.createElement($(field).attr('name'));
                          $fieldName.text($(field).val());
                          $sectionElement.append($fieldName);
                      });
                      $rootElement.append($sectionElement);
                  });
                  console.log('Form XML is '+$rootElement.html());
                  return $rootElement.html();                 
              }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="section" name="amount"&gt;
          &lt;span class="section-title"&gt;Personal Information&lt;/span&gt;
            &lt;div class="span6 form-inline"&gt;
                  &lt;label class="pocLabel"&gt;
                      &lt;span style="color:red;"&gt;*&lt;/span&gt;
                  Amount Of Insurance&lt;/label&gt;
                  &lt;input type="text" name="amount-amountOfInsurance" required="" id="123456" onblur="validateWithPRASE(this)"&gt;
            &lt;/div&gt;
            &lt;div class="span6 form-inline"&gt;
                  &lt;label class="pocLabel"&gt;
                      &lt;span style="color:red;"&gt;*&lt;/span&gt;
                  Customer First Name&lt;/label&gt;
                  &lt;input type="text" name="amount-firstName" required=""&gt;
            &lt;/div&gt;
            &lt;div class="span6 form-inline"&gt;
                  &lt;label class="pocLabel"&gt;
                      &lt;span style="color:red;"&gt;*&lt;/span&gt;
                  Customer Last Name&lt;/label&gt;
                  &lt;input type="text" name="amount-lastName" required=""&gt;
            &lt;/div&gt;
            &lt;div class="span6 form-inline"&gt;
                  &lt;label class="pocLabel"&gt;
                      &lt;span style="color:red;"&gt;*&lt;/span&gt;
                  Middle intials&lt;/label&gt;
                  &lt;input type="text" name="amount-middleIntials" required=""&gt;
            &lt;/div&gt;
            &lt;div class="span6 form-inline"&gt;
                  &lt;label class="pocLabel"&gt;
                      &lt;span style="color:red;"&gt;*&lt;/span&gt;
                  Date&lt;/label&gt;
                  &lt;input type="text" id="datepicker" class="datepicker" name="date"&gt;
            &lt;/div&gt;
            &lt;div class="span6 form-inline"&gt;
                  &lt;label class="pocLabel"&gt;
                  Street Address&lt;/label&gt;
                  &lt;input type="text" name="amount-address"&gt;
            &lt;/div&gt;
            &lt;div class="span6 form-inline"&gt;
                  &lt;label class="pocLabel"&gt;
                  City&lt;/label&gt;
                  &lt;input type="text" name="amount-city"&gt;
            &lt;/div&gt;
            &lt;div class="span6 form-inline"&gt;
                  &lt;label class="pocLabel"&gt;
                  State&lt;/label&gt;
                  &lt;input type="text" name="amount-state"&gt;
            &lt;/div&gt;
            &lt;div class="span6 form-inline"&gt;
                  &lt;label class="pocLabel"&gt;
                  State 2&lt;/label&gt;
                  &lt;input type="text" name="amount-state"&gt;
            &lt;/div&gt;
          &lt;div class="row-fluid show-grid"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>