Receive JSON response from AJAX POST request?

Question

I'm setting up a system for users to upload profile pictures to the server. These profile pictures are cropped with Croppie, then sent with a POST request for processing to a PHP file.

This PHP file receives a response from the server if the image was accepted, or if there was an error.

I'm having difficulty passing this JSON response back to an AJAX variable, so I can show it to end-users. I've set up a with the ID of "json" where the response should be shown. However, all that is being displayed is 'undefined'.

When displaying the 'response' variable without.msg, it displays the image URI - so it doesn't appear to be taking the requests made in the PHP script.

Here's what I've tried:

AJAX

$('.crop_image').on('click', function(ev) {
  $image_crop.croppie('result', {
    type: 'canvas',
    size: 'viewport'
  }).then(function(response) {
    $.ajax({
      type: 'POST',
      url: "core/account-mechanisms/push-profile-test.php?action=upload",
      data: {
        "image": response
      },
    });
    $("#json").html('<div style="margin-top:15px;" class="alert alert-success">'
      + response.msg + '</div>');
  })
});

PHP (start of script)

# Mechanism to upload image
if (isset($_POST['image'])) { # Check if image data is being sent by POST
  $c_finalCheck = true;
  $cropped_image = $_POST['image']; # Assign cropped_image from data received
  $image_array_1 = explode(";", $cropped_image); # Create image with correct encoding
  $image_array_2 = explode(",", $image_array_1[1]);
  $cropped_image = base64_decode($image_array_2[1]);

  $c_imgValid = getimagesize($c_fileCheck); # Set result of image validity and size check
  if ($c_fileCheck == false) { # Run image validity check with response
    $response['msg'] = 'Sorry, your image isn\'t valid. Please try again.';
    $c_finalCheck = false;
    header("Content-Type:application/json");
    echo json_encode($response);
  }

Answer 1

you are sending the Ajax Post to your Server, but you are not using the Ajax response. Instead you are displaying the response of your croppie call.

You need to do something like this:

  $('.crop_image').on('click', function(ev) {
                        $image_crop.croppie('result', {
                            type: 'canvas',
                            size: 'viewport'
                        }).then(function(response) {
                            $.ajax({
                                type: 'POST',
                                url: "core/account-mechanisms/push-profile-test.php?action=upload",
                                data: {
                                    "image": response
                                },
                            }).done(function(data) {
                             $("#json").html('<div style="margin-top:15px;" class="alert alert-success">' + response + '</div>');
});
                        })
                    });

I did not try it but it should give you the right direction.

Here the jquery Api reference: Ajax