即使json_encode是正确的并且一切正常，Ajax Request总是会引发错误

Question

I'm doing an e-commerce and I implemented an AJAX request to add and remove items from the cart dinamically. Everytime the jQuery is executed everything works fine , It always returns 200 OK but the error event is fired instead of success.

That's how it works:

Everytime the user click the "Add to Cart" button, the Jquery will check if this item is available, then will INSERT, ADD or Return Error:

• Status 1 = Product Inserted into Cart (Empty Cart, First time this product is added)
• Status 2 = Product added to Cart (This product is already on Cart, add +1)
• Status 3 = Not Enough Stock (All the products already on Cart)

jQUERY CODE

$.ajax({

    type: "GET",
    url: "addCart.php",
    data: { id: id, color: color },
    dataType: "json",

    success: function(result){ 
        if (result.status == 1){ alert("Product Inserted into Cart"); }
        if (result.status == 2){ alert("Product Added to Cart"); }
        if (result.status == 3){ alert("Not enough Stock"); }
    },

    error: function (result) {
        alert(result.responseText)
    }   

});

PHP CODE (addCart.php)

## I REMOVED NON-RELEVANT CODES TO SIMPLIFY THIS QUESTION BUT ALL VALIDATIONS
## HAVE ALREADY BEEN DONE, THEN RETURN THE JSON RESPONSE...

if ($status == 1){
    $status_txt = "Product Inserted into Cart";

}elseif ($status == 2){
    $status_txt = "Product Added to Cart";

}elseif ($status == 3){
    $status_txt = "Not enough stock";

}

echo json_encode(array("status" => $status, "alert" => $status_txt));

Every time the code is executed everything works as it should, the items are added to the cart, all the INSERTS and UPDATES are done, it always returns 200 OK BUT the error event is fired instead of success.

IMPORTANT ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

The strings $status and $status_txt (addCart.php) never return empty values, they always return an integer and a text message. To avoid empty values ( "" ) parse error.

THINGS I ALREADY TRIED BUT DID NOT WORK: //////////////////////////////////////////////////////////////////////////

• Remove (dataType: "json")
• Change the dataType: "json" to "text"
• Force a Header ('Content-Type: application / json');
• Use exit (); after json_encode
• Check if my JSON is valid or not on external sites, ie: jsonlint.com

I've managed an workaround that temporarily fix my problem. I used Javascript substr() , to get the Status number on error responseText and then made all the validations on the Ajax Error Event:

JAVASCRIPT WORKAROUND

    error: function (result) {

        status = result.responseText.substr(10, 1); 
        if (status == 1){ alert("Product Inserted into Cart"); }
        if (status == 2){ alert("Product Added to Cart"); }
        if (status == 3){ alert("Not enough Stock"); }

    }

Where responseText return the Json result:

{"status":1,"alert":"Product inserted to Cart"}

And using substr() will return the status number (1, 2 or 3):

status = result.responseText.substr(10, 1); 

I know it's not the right way to handle this, that's why I want to fix this error that's driving me nuts...

What I'm doing wrong? I've used this code several times and I've never had this problem before, I've read tons of similar questions here on StackOverflow but none of them worked for me...

Any help is appreciated!

Answer 1

Your JSON response body is invalid. This can be seen in your comment ...

I get Array{"status":1,"alert":"Product Inserted"}

That "Array" prefix is not valid and is typically an indicator of accidental array-to-string conversion in PHP, prior to where you echo JSON. For example

echo [1,2,3]; // Notice: Array to string conversion in ...

When developing, you should always run PHP with error-reporting set to the highest level. Displaying errors in your output is also the quickest way to be alerted.

You have two options...

1. In your development environment's php.ini file, set

    error_reporting = E_ALL 

   and

    display_errors = On 

2. In your code

    ini_set('display_errors', 'On'); error_reporting(E_ALL); 

This should help you track down any accidental output (which it did).

---

Also, you were missing out on vital information in your client-side error handler. The signature for the callback is

Function( jqXHR jqXHR, String textStatus, String errorThrown )

You can gain some valuable insight with something as simple as

console.error(textStatus, errorThrown)

Answer 2

worked for me

addCart.php

<?php
// your inserts and checking here.    
$str = json_encode(array("status" => $status, "alert" => $status_txt));
echo $str;

and in the AJAX request

$.ajax({
  url: 'ajax/addCart.php',
  type: 'POST',
  data: { id: id, color: color },
  dataType: 'json',
  success: function(res){
     console.log(res['status']);
     if (res['status'] == 1) {
       console.log('nice');
     }
  },
  error: function(s) {
     console.log(s.responseText);
  }
});