title: Different way in constructing ajax data parameter?
body: <p>I was quite confused with constructing data parameter of ajax using ASP.NET MVC and Webform and need an explanation from stackoverflow community.</p>
  
  <p>First scenario (passing javascript object literal as data parameter in ajax using MVC) Results: It worked</p>
  
  <p>MVC Controller</p>
  
  <pre><code>    [HttpPost]
      public JsonResult Register(string Name, string Birthday, int Gender)
      {
          .
          .
          .
          return Json(message);
      }
  </code></pre>
  
  <p>Javascript Code:</p>
  
  <pre><code>    $.ajax({
          url: "/Test/Register",
          method: "POST",
          dataType: "json",
          data: {
              Name:name,
              Birthday:birthday,
              Gender:gender
          }
      }).success(function (response) {
          alert(response);
      }).error(function (response) {
          alert(response);
      });
  </code></pre>
  
  <p>Second scenario (passing javascript object literal as a string as data parameter in ajax using MVC) Results: Cause error 500 (Internal Server Error)</p>
  
  <p>Javascript Code:</p>
  
  <pre><code>    var name = $('#Name').val();
      var birthday = $('#Birthday').val();
      var gender = $('#Gender').val();
      var data = "{ Name:'" + name + "', Birthday:'" + birthday + "', Gender:'" + gender + "'}";
  
      $.ajax({
          url: "/Test/Register",
          method: "POST",
          dataType: "json",
          data: data,
      }).success(function (response) {
          alert(response);
      }).error(function (response) {
          alert(response);
      });
  </code></pre>
  
  <p>Results were different when I tested it on ASP.NET Webforms</p>
  
  <p>Third scenario (passing javascript object literal as a string as data parameter in ajax using Webforms) Results: It worked</p>
  
  <p>Webform WebMethod</p>
  
  <pre><code>    [WebMethod]
      public static string Submit(string Name, String Salary)
      {
          return "Success";
      }
  </code></pre>
  
  <p>Javascript Code:</p>
  
  <pre><code>    var name = $("#Name").val();
      var salary = $("#Salary").val();
      var data = "{ Name:'" + name + "', Salary:'" + salary + "'}";
      $.ajax({
          url: '/WebForm3.aspx/Submit',
          contentType: "application/json; charset=utf-8",
          method: 'POST',
          data: data,
          dataType: 'json',
          success: function (response)
          {
              console.log(response);
          },
          error: function (response)
          {
              console.log(response);
          }
      });
  </code></pre>
  
  <p>Forth scenario (passing javascript object literal as data parameter in ajax using Webforms) Results: Cause error 500 (Internal Server Error)</p>
  
  <pre><code>    $.ajax({
          url: '/WebForm3.aspx/Submit',
          contentType: "application/json; charset=utf-8",
          method: 'POST',
          data: {
              Name: name,
              Salary: salary
          },
          dataType: 'json',
          success: function (response)
          {
              console.log(response);
          },
          error: function (response)
          {
              console.log(response);
          }
      });
  </code></pre>
  
  <p>Questions:</p>
  
  <ol>
  <li><p>Why?</p></li>
  <li><p>Will the scenarios that worked here on jQuery's ajax also work on other javascript frameworks like angularJS's $http service? </p></li>
  <li><p>I also saw some scenarios on the internet that constructs its ajax data parameter using '=' example:</p>
  
  <pre><code>var reservation = { "CourseCode": courseCode.val().toString(), "Section": section.val().toString(), "DateFrom": dateF.toString(), "DateTo": dateT.toString(), "Schedule": reservations };
  
          $.ajax({
              url: '/ReserveSubject',
              type: 'POST',
              data: 'reservation=' + JSON.stringify(reservation),//Like this
  </code></pre></li>
  <li><p>Can anyone show more more ways to construct ajax data parameters aside from the scenarios above? It would also be much appreciated if someone could also show the most eloquent way of constructing data parameter.  </p></li>
  </ol>
  
  <p>No takers?</p>