jQuery .ajax() GET request not working from firefox. Works with Chrome

Question

I am using a third party API to integrate some services into an HTML form I have.

To use the API you have to validate a hash value and timestamp for each request. After 30 minutes your hash and timestamp are no longer valid. To avoid an error from the API I decided to use JavaScript and PHP to dynamically set the value each time the form is submitted.

This is the PHP file I'm using to generate my hash and timestamp information.

 <?php
    if(isset($_REQUEST['action'])){
    switch($_REQUEST['action']){
    case 'getHash':
    //Assign your variables the necessary values.
    $base_url = "";//base_url value goes here. This is the location the request is sent to. 
    $account_id = "";//You must put your account_id here
    $api_accesskey = "";//You must put your api_accesskey here
    $success_url = "";//Your success URL goes here
    $decline_url = "";//your decline URL goes here.
    $timestamp = time();
    //The $hash_string concatenates your three required parameters that 
    //will be hashed. If you are using transparent redirect you must 
    //also add your success and decline URLs.
    $hash_string = $account_id.",".$api_accesskey.",".$timestamp.",".$success_url.",".$decline_url;
    //The $hash_value is the variable you will post.
    $hash_value = hash("sha256",$hash_string);
    $hash_data = array(
            'base_url' => $base_url,
            'account_id' => $account_id,
            'success_url' => $success_url,
            'decline_url' => $decline_url,
            'timestamp' => $timestamp,
            'hash' => $hash_value,
            );
    $jsonHash = json_encode(array('success'=> true,'data' => $hash_data), JSON_FORCE_OBJECT);
    print_r ($jsonHash);
    break;
    }
    }
    ?>  

This is the jQuery/JavaScript I am using to request the information for my HTML form and then subsequently submit that information to the third party API.

<script>
function getPaymentFormInformation(event) {
//this is the query string we send to hash.php to get our hash and   config information
var post_data = {action: "getHash"};
$.ajax({
  url: "hash.php",
  data: post_data,
  dataType: 'json',
  type: "GET",
  success: function(response ){
    //assigning the response to a variable.
    var json = response;
    //assigning our values for submitting our request.
    document.getElementById('account_id').value = json.data.account_id;
    document.getElementById('success_url').value = json.data.success_url;
    document.getElementById('decline_url').value = json.data.decline_url;
    document.getElementById('timestamp').value = json.data.timestamp;
    document.getElementById('hash').value = json.data.hash;
    document.getElementById('paymentForm').action = json.data.base_url;
    document.getElementById("paymentForm").submit();
  },
  error: function( error ){
// Log any error.
console.log( "ERROR:", "Request did not work." );
  }
})
return false;
}
</script>

This works perfectly on Chrome, but when I run it in firefox my AJAX request to hash.php fails every single time. I've searched and searched for someone having the same issue and I cannot come up with anything.

Any and all help will be appreciated.

UPDATE:

EDIT: Updated my code snippet to reflect suggested changes in answers given. Still experiencing the same behavior in firefox.

UPDATE:

I have changed my error catching function to be more verbose from another example I found.

error: function(jqXHR, exception) {
        if (jqXHR.status === 0) {
            alert('Not connect.\n Verify Network.');
        } else if (jqXHR.status == 404) {
            alert('Requested page not found. [404]');
        } else if (jqXHR.status == 500) {
            alert('Internal Server Error [500].');
        } else if (exception === 'parsererror') {
            alert('Requested JSON parse failed.');
        } else if (exception === 'timeout') {
            alert('Time out error.');
        } else if (exception === 'abort') {
            alert('Ajax request aborted.');
        } else {
            alert('Uncaught Error.\n' + jqXHR.responseText);
        }
      }

I am now getting:

uncaught exception: out of memory

Firebug output:

I have updated my error handler to output to the console instead of throw alerts.

This line is being triggered when I send a request.

if (jqXHR.status === 0) {
console.log('Not connected.\n Verify Network.');

Answer 1

After being given the information to add more robust error reporting I was able to pinpoint the issue.

My error script was failing at if (jqXHR.status === 0). I was able to search on this status code and find a resolution.

JQXHR Status:0 Reason: Request does not cancel when the ajax function is called. Resolution: Simply add return false; after calling the function, i.e OnClientClick="AJAXMethod(); return false;"

Source: Ajax jqXHR.status==0 fix error (second response)

Answer 2

You are not sending json to the server, just a normal query string (both before and after the edit), nor are you processing json on the server side; you access your variables via the super-global $_REQUEST.

So you need to remove:

contentType: 'application/json; charset=utf-8',

As you are sending json back, you probably want this instead so that jQuery will parse the json string automatically for you:

dataType: 'json',

Now you don't have to parse the json manually in your success handler.