title: How do I submit form data via AJAX to Braintree Transparent redirect?
body: <p>Using Python and JQuery here..</p>
  
  <p>We previously were submitting using a normal <code>form.submit();</code> in the <code>submitHandler</code> of the validation (JQuery plugin) call.  This was submitted to Braintree's transparent redirect url, with the redirect-to set to be a GET handler on our server.  We do the confirm and then another redirect in our handler.  If the submitted data didn't pass braintree (a bad credit card, say), then we write some html to a <code>&lt;div id="error"&gt;errormessage&lt;/div&gt;</code> in the response from our handler, and this gets inserted in the user's page.</p>
  
  <p>The problem is if there is an error in our handler, which would produce a 500 status code, everything falls to hell and the user's page has undesirable behavior.</p>
  
  <p>I want to be able to handle the 500 response from our handler, if it happens.</p>
  
  <p>I was thinking I could do it using the <code>statusCode</code> attribute of jQuery's AJAX.</p>
  
  <p>here's what I've tried (in the <code>submitHandler</code>):</p>
  
  <pre><code>var data = $(form).serialize();
  $.ajax({
    type: 'POST',
    url: braintree_url,
    data: data,
    statusCode: {
      500: function() {
        alert('broked response yo');
      }
    }
  });
  </code></pre>
  
  <p>And then I intentionally raise an error in our handler to force the 500.</p>
  
  <p>But my ajax submit to the Braintree url is not working.  The <code>form.submit();</code> worked fine, however.</p>
  
  <p>What am I doing wrong?  Am I wrong to think that a form can be submitted via AJAX like this and produce the same result?</p>
  
  <p>FWIW, we are providing a number of attributes to our html form, as follows:</p>
  
  <pre><code>%form#addcard{"action": braintree_url, "method": "post", "autocomplete": "off", "submittype": "secure", "next": braintree_url, "target": "hidden_iframe")}
  </code></pre>
  
  <p>EDIT:</p>
  
  <p>I realized after some more reading about ajax that the probable reason my setup here is not working is because it's calling out to another domain (Braintree's), in violation of the same origin policy.  So the browser is not carrying it out.</p>
  
  <p>from: <a href="http://api.jquery.com/jQuery.ajax/" rel="nofollow">http://api.jquery.com/jQuery.ajax/</a></p>
  
  <blockquote>
    <p>Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.</p>
  </blockquote>