title: ajax json Post to Spring mvc Controller "415 Unsupported Media Type"
body: <p>Hi so I am having problems with getting the JSON from my form to my work with spring mvc. My form is dynamic and the JSON comes back as a list of the criteria that the user filled out on the form. Ideally I would like to be able to get the JSON to come over as a Criterias object which contains a list of Criteria objects. (Like my model classes below) I dont know if this is possible or if there is a different way to go about it but any advice would be much appreciated.   </p>
  
  <p>**Currently I am receiving a 415 unsupported Media Type from the ajax post.</p>
  
  <p>CONTROLLER  </p>
  
  <pre><code>@RestController   
  public class Controller {
  @RequestMapping(value-"/test",method=RequestMethod.GET
  public ModelAndView getTest(){
  
  ModelAndView model = new ModelAndView("test");
  
  }
  @RequestMapping(value-"/query",method=RequestMethod.POST
  public ModelAndView submitTest(@RequestBody Criterias criterias){
  
  //do stuff....
  ModelAndView model = new ModelAndView("results");
  
  }
  </code></pre>
  
  <p>MODEL  </p>
  
  <pre><code>public class Criterias{
  private List&lt;Criteria&gt; criteria = new ArrayList&lt;Criteria&gt;();
  getter setter...
  }
  
  public class Criteria{
  private String field;
  private String filter;
  private String operator;
  private String criteria;
  
  
  getters setters...
  }
  </code></pre>
  
  <p>TEST.JSP</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $("#theButton").click(function() {
      $('#myTable').append("&lt;tr&gt;&lt;td&gt;&lt;select name = 'operator'&gt;&lt;option&gt;AND&lt;/option&gt;&lt;option&gt;OR&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;td&gt;Field:&lt;select name='field'&gt;&lt;option&gt;a&lt;/option&gt;&lt;option&gt;b&lt;/option&gt; &lt;option&gt;c&lt;/option&gt; &lt;option&gt;d&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;td&gt; &lt;select name='filter'&gt;  &lt;option&gt;Contains&lt;/option&gt; &lt;option&gt;Does Not Contain&lt;/option&gt; &lt;option&gt;Equals&lt;/option&gt; &lt;option&gt;Does Not Equal&lt;/option&gt; &lt;/select&gt; &lt;/td&gt;&lt;td&gt;  &lt;input name='criteria' type='text'&gt; &lt;/td&gt;&lt;td&gt;&lt;button type ='button' class ='rm' title = 'Remove Row'/&gt;&lt;/td&gt;&lt;/tr&gt;")
    });
    $("#myTable").on('click', '.rm', function() {
      $(this).parent().parent().remove();
    });
  });
  
  function post() {
  
    $.ajax({
      type: "POST",
      contentType: 'application/json; charset=utf-8',
      dataType: 'json',
      url: "query",
      data: JSON.stringify($('form').serializeArray())
  
    })
  
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;form&gt;
  
    &lt;table&gt;
      &lt;tbod&gt;
        &lt;tr&gt;
          &lt;td&gt;Field:
            &lt;select name='field'&gt;
              &lt;option&gt;a&lt;/option&gt;
              &lt;option&gt;b&lt;/option&gt;
              &lt;option&gt;c&lt;/option&gt;
              &lt;option&gt;d&lt;/option&gt;
            &lt;/select&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;select name='filter'&gt;
              &lt;option&gt;Contains&lt;/option&gt;
              &lt;option&gt;Does Not Contain&lt;/option&gt;
              &lt;option&gt;Equals&lt;/option&gt;
              &lt;option&gt;Does Not Equal&lt;/option&gt;
            &lt;/select&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input name='criteria' type='text'&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbod&gt;
    &lt;/table&gt;
    &lt;table id='myTable'&gt;
      &lt;tbody&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  
    &lt;input type="button" value="search" onclick="return post();"&gt;
    &lt;input type="button" id="theButton" value="Add Criteria"&gt;
  
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I attempted to do something a little simpler to narrow down the issue and from what I have looked up it seems to be a problem with the jackson mapping. The following code produces 415 error as well.</p>
  
  <p><strong>Controller</strong>  </p>
  
  <pre><code>@RestController
  public class Rest{
  @RequestMapping(value="/testModel",method=RequestMethod.GET)
  public ModelAndView getTestModel(){
     return new ModelAndView("testModel");
  }
  
   @RequestMapping(value="/sendTestModel",method=RequestMethod.POST)
   public String submiteTestModel(@RequestBody TestModel test){
     return test.getName();
   }
   }
  </code></pre>
  
  <p><strong>MODEL</strong></p>
  
  <pre><code>public class TestModel{
  
  private String id;
  private String name;
  
  //getters setters....
  }
  </code></pre>
  
  <p><strong>testModel.jsp</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function post() {
  
      $.ajax({
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json'
            },
            type: "POST",
            contentType: 'application/json;,
      dataType: '
            json ',
      url: "sendTestModel",
      data: JSON.stringify({id:"1",name:"Bob"})
  
    })
  
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;Html&gt;
  &lt;input type="button" value="search" onclick="return post();"/&gt;
  &lt;/Html&gt;</code></pre>
  </div>
  </div>
  </p>