title: Spring MVC - Return view with Ajax using POST and sending data
body: <p>I am trying to develop a simple component which job is to render particular portion of the data using a template. </p>
  
  <p>I am using a Spring-Data-Rest-MVC so I've got a ready and working OOTB source of the data that suits my requirements (AJAX-based web app). </p>
  
  <p>So, with what I am having problem with. 
  The problem lies here:</p>
  
  <pre><code>{
    "panels":[
      {
        "id":"panel-BASIC",
        "el":"panel-BASIC",
        "attributes":[
          {
            "position":"0",
            "key":"id",
            "display":"value",
            "dataUtility":"",
            "value":"2"
          },
          {
            "position":"1",
            "key":"begin",
            "display":"value",
            "dataUtility":"",
            "value":1384518600000
          },
          {
            "position":"2",
            "key":"end",
            "display":"value",
            "dataUtility":"",
            "value":1384518600000
          },
          {
            "position":"3",
            "key":"interval",
            "display":"value",
            "dataUtility":"intervalCalculationDataUtility"
          }
        ]
      },
      {
        "id":"panel-ONE_TO_MANY",
        "el":"panel-ONE_TO_MANY",
        "attributes":[
          {
            "position":"0",
            "key":"tasks",
            "display":"table",
            "dataUtility":"",
            "value":"http://localhost:8080/rest/appointment/2/tasks"
          }
        ]
      },
      {
        "id":"panel-MANY_TO_ONE",
        "el":"panel-MANY_TO_ONE",
        "attributes":[
          {
            "position":"0",
            "key":"car",
            "display":"infopage",
            "dataUtility":"",
            "value":"http://localhost:8080/rest/appointment/2/car"
          },
          {
            "position":"1",
            "key":"assignee",
            "display":"infopage",
            "dataUtility":"",
            "value":"http://localhost:8080/rest/appointment/2/assignee"
          },
          {
            "position":"2",
            "key":"reporter",
            "display":"infopage",
            "dataUtility":"",
            "value":"http://localhost:8080/rest/appointment/2/reporter"
          }
        ]
      }
    ],
    "container":"ip-SAppointment"
  }
  </code></pre>
  
  <p>It's the descriptor which is being sent to the server, previously built in the client side using retrieved data and template descriptor.</p>
  
  <p>Using a JSON I've posted I need to sent a POST request with it and than return rendered view.
  The job of a controller method is rather simple:</p>
  
  <pre><code>@RequestMapping(
          value = "/template/render",
          method = RequestMethod.POST,
          produces = MediaType.TEXT_PLAIN_VALUE,
          consumes = MediaType.APPLICATION_JSON_VALUE
  )
  public ModelAndView getInfoPageViewData(
          @RequestBody final InfoPageDescriptor body
  ) {
      LOGGER.trace(String.format("/getInfoPageViewData -&gt; %s", body));
      final ModelMap modelMap = new ModelMap();
      modelMap.put("dd", body);
      return new ModelAndView(DATA_VIEW_NAME, modelMap);
  }
  </code></pre>
  
  <p>So as You can see it wraps the sent JSON into the InfoPageDescriptor bean which is placed than into ModelMap. </p>
  
  <p>The returned view will process the bean from the model map and acts accordingly to entries. </p>
  
  <p>Anyway I can get this method working. With the jQuery (AJAX-POST) call like this:</p>
  
  <pre><code>function loadRenderedView(url, data, callback) {
      return $.ajax({
          headers : {
              'Accept'      : 'text/plain',
              'Content-Type': 'application/json'
          },
          url     : url,
          data    : JSON.stringify(data),
          dataType: 'json',
          type    : 'post',
          success : function (data) {
              callback.apply(this, [data, true]);
          },
          failure : function () {
              callback.apply(this, [data, false]);
          }
      });
  }
  </code></pre>
  
  <p>I get an error: <strong>The request sent by the client was syntactically incorrect.</strong>.</p>
  
  <p>Could You give some hints of how I should built a request or controller-server method to make it work ?</p>