Jquery AJAX POST到PHP不返回服务器上的数据

Question

I'm using Fabric.js to create a basic desktop wallpaper editor. One of the features allows users to share their wallpapers.

On the click of this button, it converts the canvas to an image data url (data:image/png).

This all works fine, my issue is with the ajax post and it not submitting the data. It works perfectly fine on localhost, but when running on my online server, it doesn't submit the data.

$("#share").click(function() {
    if (confirm('Are you sure you want to share your wallpaper? YES | NO')) {

        // Left out the rest of the Fabric.js canvas stuff here as that works fine

        var image = canvas.toDataURL('png'),
        var thumb = canvas.toDataURL('png');

        var formData = {'image':image, 'thumb':thumb};

        $.ajax({
            url: '/ajax/share.php',
            type: 'post',
            data: formData,
            dataType: "json",
            success: function(response) {
                console.log(response);
            }
        });
    }
});

For testing purposes, all my php file is doing is echoing the results:

$results = 'Image: ' . $_POST['image'] . ' Thumb: ' . $_POST['thumb'];
echo json_encode($results); exit ;

I have tried a combination of dataType being json and normal, along with contentType and processData being false. Once again, all these works locally, but when run on the server there is a blank response. I have also tried specifying the contestType as "application/json".

Without using the json dataType, on the server it just spits back the html page.

Any ideas/solutions to this problem? Could it be a server config or something? Cause all my other ajax I'm using for other functions work fine, it's just this one.

Edit: I have now added an error to the ajax:

error: function(xhr, status, error) {
    console.log(xhr.responseText);
}

With this error, it isn't triggered locally, but when on the server this error is triggered and the index html being returned. So the php file isn't even being triggered on the server.

I have something else which may be useful. On the server, when trying to access share.php, the page is getting a status of 302. But it will be fine and show up normally as 200 locally.

Answer 1

Maybe you can try

$("#share").click(function() {
    if (confirm('Are you sure you want to share your wallpaper? YES | NO')) {

        // Left out the rest of the Fabric.js canvas stuff here as that works fine

        var image = canvas.toDataURL('png'),
        var thumb = canvas.toDataURL('png');

        $.ajax({
            url: '/ajax/share.php',
            type: 'post',
            data: {'image':image, 'thumb':thumb},
            dataType: "json",
            success: function(response) {
                console.log(response);
            }
        });
    }
});