title: Correct way of post an object array using form post
body: <p>I'm trying to use an payment service API in my application and following the documentation provided on the website. According to the docs, the POST body should look like this:</p>
  
  <pre><code>api_hash=38be425a-63d0-4c46-8733-3e9ff662d62d
  &amp;hash=ac0945d82b8589959b5f4ffafcc1a6c5983e82b8b4094c377a7b9c43d4a432bc
  &amp;order_id=2845
  &amp;amount=15
  &amp;currency=EUR
  &amp;email=stefan@my-test-store.com
  &amp;url_failure=http://my-test-store.com/order/fail
  &amp;url_ok=http://my-test-store.com/order/success
  &amp;items=[{"sku":"450","name":"Test Item","amount":"15","type":"item_type","qty":"1","price":15,"id":"5619","url":"http://example.com/products/item/example-item-name-5619"}]
  </code></pre>
  
  <p>I was able to successfully make a post request with postman however I'm confused about the "items" part in the post body since it's an object array. My html form looks like this:</p>
  
  <pre><code>&lt;form method="post" action="@ViewBag.G2AConfig.PostUrl" id="g2apaymentform"&gt;
      &lt;!--PayPal Settings--&gt;
      &lt;input type="hidden" name="api_hash" value="@ViewBag.G2AConfig.ApiHash" /&gt;
      &lt;input type="hidden" name="hash" value="@ViewBag.Hash" /&gt;
      &lt;input type="hidden" name="order_id" value="@ViewBag.OrderId" /&gt;
      &lt;input type="hidden" name="amount" value="@Model.Total" /&gt;
      &lt;input type="hidden" name="currency" value="USD" /&gt;
      &lt;input type="hidden" name="email" value="@ViewBag.G2AConfig.MerchantEmail" /&gt;
      &lt;input type="hidden" name="url_failure" value="@ViewBag.UrlFailure" /&gt;
      &lt;input type="hidden" name="url_ok" value="@ViewBag.G2AConfig.ReturnUrl" /&gt;
  
      @foreach (var item in Model.Items)
      {
          &lt;input type="hidden" name="items[@index][sku]" value="@item.Product.GameAccountId" /&gt;
          &lt;input type="hidden" name="items[@index][name]" value="@item.Product.Rank.Name" /&gt;
          &lt;input type="hidden" name="items[@index][amount]" value="@item.Product.MarketPrice" /&gt;
          &lt;input type="hidden" name="items[@index][qty]" value="1" /&gt;
  
          index = index + 1;
      }
  &lt;/form&gt;
  </code></pre>
  
  <p>I'm using Ajax post to make the request which looks like this:</p>
  
  <pre><code>event.preventDefault(); //prevent default action 
                      var post_url = $(this).attr("action"); //get form action url
                      var request_method = $(this).attr("method"); //get form GET/POST method
                      var form_data = $(this).serialize(); //Encode form elements for submission
  
                      $.ajax({
                          url: post_url,
                          type: request_method,
                          data: form_data
                      }).done(function (response) { //
                          $("#server-results").html(response);
                      });
  </code></pre>
  
  <p>This does not work and I get bad error response from the server. What's the correct way to submit a form with an object array?</p>