title: Ajax POST returning an Bad Request 400
body: <p>I have been trying for few hours to debug a Post Ajax call to my server.</p>
  
  <p>I have 2 POST methods: HelloWorld and HelloYou.</p>
  
  <p>Same code, the only difference is that HelloYou takes a string as parameter:</p>
  
  <pre><code>namespace WebService
  {
      [ServiceContract(Namespace = "")]
      [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
      public class Service
      {
          [OperationContract]
          [WebInvoke(Method = "POST",
              BodyStyle = WebMessageBodyStyle.WrappedRequest,
              ResponseFormat = WebMessageFormat.Json,
              RequestFormat = WebMessageFormat.Json)]
          public string HelloWorld()
          {
              return "Hello World";
          }
  
          [OperationContract]
          [WebInvoke(Method = "POST",
              BodyStyle = WebMessageBodyStyle.WrappedRequest,
              ResponseFormat = WebMessageFormat.Json,
              RequestFormat = WebMessageFormat.Json)]
          public string HelloYou(string name)
          {
              return string.Format("Hello {0}",name);
          }
      }
  }
  </code></pre>
  
  <p>The HTML client looks like that:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;My Application&lt;/title&gt;
      &lt;script type="text/javascript" src="/Scripts/jquery-2.1.1.min.js"&lt;/script&gt;
      &lt;script type="text/javascript" src="/Scripts/ajax.js"&gt; &lt;/script&gt;
      &lt;script type="text/javascript" src="/Scripts/events.js"&gt; &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;button id="world"&gt;HelloWorld&lt;/button&gt;
      &lt;button id="you"&gt;HelloYou&lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and the Ajax calls:</p>
  
  <pre><code>$(document).ready(function () {
      $('#world').click(function () {
          HelloWorld();
      });
  
      $('#you').click(function () {
          HelloYou();
      });
  });
  
  baseAddress = "http://localhost:53016/Service.svc/ajax/";
  
  function GetURL(method) {
      return baseAddress + method;
  }
  
  function HelloWorld() {
      $.ajax({
              async: false,
              url: GetURL("HelloWorld"),
              dataType: 'json',
              type: 'POST',
              data: null ,
              processdata: true,
              contentType: "application/json;charset-uf8"
          })
  
          .done(function(data) {
              alert(data.d);
          })
          .fail(function (xhr, status, errorThrown) {
              alert(status + errorThrown);
          });
  }
  
  function HelloYou() {
      $.ajax({
          async: false,
          url: GetURL("HelloYou"),
          dataType: 'json',
          type: 'POST',
          data: JSON.stringify('{"name": "Chris"}'),
          processdata: true,
          contentType: "application/json;charset-uf8"
      })
      .done(function (data) {
          alert(data.d);
      })
          .fail(function (xhr, status, errorThrown) {
          alert(status + errorThrown);
      });
  }
  </code></pre>
  
  <p>I have tried few different ways to pass the parameter to the Ajax call:</p>
  
  <pre><code>data: JSON.stringify('{"name": "Chris"}'),
  data: '{"name": "Chris"}',
  data: '{name: "Chris"}',
  
  var name ="Chris"
  data: '{name: ' + JSON.stringify(name) + '}',
  </code></pre>
  
  <p>Every time, I get an error Bad Request 400. The same function HelloWorld with no parameter works fine.</p>
  
  <p>I am lost.</p>
  
  <p>I checked with Fidler the HTML Request/Response:</p>
  
  <p>POST /Service.svc/ajax/HelloYou HTTP/1.1</p>
  
  <p>HTTP/1.1 400 Bad Request</p>
  
  <p>Thanks all</p>
  
  <p>Isidore</p>