无法使用Ajax到达php文件

Question

I have a page where one can upload an image and crop it (to do so i've used this plugin), the result of this crop is then saved in a server.

After looking at the documentation i tried this:

JQUERY

var zis = //some div where i uploaded the image;
$('.export').click(function() {
    var imageData = $('.image-editor').cropit('export');
    zis.find('#img_val').val(imageData);
    zis.find('.salvaImmagine').click();
});

PHP

public function immagine_profilo(){
    if (isset($_POST['crop'])){

        var_dump($_POST['img_val']);
        // Get the base-64 string from data
        $filteredData = substr($_POST['img_val'], strpos($_POST['img_val'], ",")+1);

        // Decode the string
        $unencodedData = base64_decode($filteredData);

        // image new name
        $newfilename = 'images/immProf' . $_SESSION['auth'] . '.png';
        file_put_contents($newfilename, $unencodedData);

        // saves the path into a database
        $query = "UPDATE users SET pic = '{$newfilename}' 
                    WHERE id = {$_SESSION['auth']}";
        $result = mysqli_query($_SESSION['connessione'], $query);
        return // function to retrive the image;
    }
}

So far so good, the images is saved in the server, its path is saves aswell, only one problem remains: the page needs to be reloaded in order to see the image change, ok we can do better: update the image without a page reload.

So i searched the web to find out about ajax, after some time i've come up with this:

JQUERY

$('.export').click(function() {

    var imageData = $('.image-editor').cropit('export');
    zis.find('#img_val').val(imageData);

    lightbox(false);

    zis.find('.salvaImmagine').click();
});
$('.salvaImmagine').on('click', function(event) {
    event.preventDefault();
    var imageData = $('.cop').cropit('export');
    $.ajax({
        url: 'lib/ottieniCose.php',
        type: 'POST',
        dataType: 'html',
        data: {
            crop: 'Salva',
            crop_cop: 'Salva',
            img_val: imageData
        },
    })
    .done(function(response) {
        console.log("success");
        $(".copertina").css('background-image', 'url(' + response + ')');
    })
    .fail(function() {
        console.log("error");
    })
});

PHP (lib/ottieniCose.php)

//rquire bla bla bla
if (isset($_POST['crop']) || isset($_POST['crop_cop'])) {
    var_dump("test");
    //calls the function to save the image
    $login->immagine_profilo();
}

Now, i get absolutely no result, the images isn't saved, the path isn't saved, the php page doesn't seem to be called at all (althoug there are no 404 errors) but the image is being cropped, i know that by looking into the code.

I also tried changing the POST method to GET method in ajax, but i get error 414, any help?

the HTML

<div id="lightbox">
    <div class="image-editor">
        <div class="scegliImm">
            <p>Scegli un'imagine</p>
        </div>
        <input type="file" class="cropit-image-input">
        <div class="cropit-image-preview-container">
            <div class="cropit-image-preview" style="background-image: url(<?php print $login->get_profile_pic() ?>)"></div>
        </div>
        <div class="image-size-label">
            <p>Nessuna immagine selzionata,<br> seleziona un'immagine.<br>P.S. Puoi trascinare l'immagine<br> nuova sopra quella vecchia</p>
            <div class="esci">
                <p>Esci</p>
            </div>
        </div>
        <div class="neh">
            <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
                <div>
                    <input type="hidden" name="img_val" id="img_val" value="">
                    <input type="submit" name="crop" value="Salva" class="salvaImmagine">
                </div>
            </form>
            <div id="salvaImma">
                <input type="range" class="cropit-image-zoom-input">
                <button class="export">Salva</button>
            </div>
        </div>
    </div>
</div>

Answer 1

Try to give absolute path to that ajax call or if your lib folder at the root of your website then use backslash before the lib

so your url will  be :- /lib/ottieniCose.php

It may help you.