Difference between a form post and jquery post

Question

I need to know the exact difference between:

<form method="POST" action="https://mywebsite/signon.php">
<input name="harv_acc" value="940322903" type="hidden" />
<input name="harv_eml" value="[email protected]" type="hidden" />
<input type="submit" value="SignOn" />

and

var url = "https://mywebsite/signon.php";
$.ajax({
    url: url,
    type: 'POST',
    //dataType: 'html', -- this was something I tried later
    //data: "harv_acc=" + accountnumber + "&harv_eml=" + email , this is also what I tried last but below is what I tried first
    data: { harv_acc: account, harv_eml: email },
    success: function (data) {
        closePopup("div_PleaseWait");
        alert(data);
        //window.location = encodeURI('<%= Url.Action("DownloadDocument", "Documents") %>?DocumentID=' + documentID + '&DownloadType=' + downloadType + '&DownloadPath=' + data);
    }
});

When I post the latter I get a 200 but no response. If I submit the first one I get the correct response.

Answer 1

From the comments:

I'm posting to another site

Aha! There's your issue. Browsers block AJAX to external websites for security reasons. Sorry, but you're not going to issue that request via an XHR request.

If the other website wants you to communicate with them, they could expose this part of the site via JSON-P, which works something like this:

1. My site adds <script src="http://othersite.com/signon.js?username=foo&password=bar&callback=myCallback"> to the source code (yeah, it's messy to use GET for this, but JSON-P can't work any other way), and creates a function named myCallback to handle the response data.
2. The other site signs in, then returns something like myCallback({success: false, errorMessage: "Incorrect password, try again!"})
3. That script is run on my site, calls myCallback, and everything is happy.

JSON-P is a powerful protocol, but only works if the remote site agrees to it. Still, if they do, jQuery has a nice shortcut for it: just set dataType: "jsonp" and it will handle the whole callback thing for you.

But if you're not closely involved with this website, that's unlikely to happen, and you'll probably just be stuck with having to give up on this kind of cross-site interaction. Sorry, but this kind of cross-domain policy is critical to online security. (I don't want other sites issuing requests to bankofamerica.com on my behalf, kthx.)

Answer 2

The first parameter passed to your complete function will be a jqXHR object, which is a wrapper around the browser's XMLHttpRequest object. A more convenient way to handle the response is to use the done method:

var url = "https://mywebsite/signon.php";
$.ajax({
    url: url,
    type: 'POST',
    dataType: 'html',
    data: "harv_acc=" + accountnumber + "&harv_eml=" + email
}).done(function(data) {
    closePopup("div_PleaseWait");
    alert(data);
});