带有多个返回值的Javascript和PHP ajax调用返回undefined

Question

I have the following code with which I'm trying to do an AJAX call that can return multiple values

    // Make an ajax call to insert a new row.
    // Newer jquery uses done and fail instead of success and error.
    $.post("add_row_item.php", {
      work_order_id: 1
    }).done(function(data) {
      // Ajax request was successful.
      console.log(data);
      // Check if database query produced errors.
      if(data.error != "") {
        alert('Error trying to add a row - ' + data.error);
      }
    }).fail(function(xhr, status, error) {
      // Ajax request failed.
      var errorMessage = xhr.status + ': ' + xhr.statusText;
      alert('Error trying to add a row - ' + errorMessage);
    });

The PHP code encodes the return message as follows:

echo json_encode(array("error" => "Error: " . mysqli_error($con)));

I get the following on the browser console:

{"error":"Error: Table 'db.tutorials' doesn't exist"}

But the alert gives me an undefined in the message:

Error trying to add a row - undefined

Anybody know where I'm going wrong with the alert part?

Answer 1

data is actually a string, '{"error":"Error: Table 'db.tutorials' doesn't exist"}'. You can convert it to an object using JSON.parse:

data = JSON.parse(data);

or alternatively, specify

dataType : "json"

to your ajax call and it will be automatically converted on receipt (see the manual).