无法使用Ajax到达php文件

Question

我有一个页面，可以上传图像并对其进行裁剪（为此，我使用了此插件 ），然后将裁剪的结果保存在服务器中。

在查看了文档之后，我尝试了以下方法：

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;
    }
}

到目前为止，图像已保存在服务器中，其路径也被保存，仅剩下一个问题：需要重新加载页面以查看图像更改，好的，我们可以做得更好：在没有页面的情况下更新图像重装。

所以我在网上搜索了有关ajax的信息，一段时间后，我想到了这个：

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();
}

现在，我绝对没有结果，没有保存图像，没有保存路径，似乎根本没有调用php页面（尽管没有404错误），但是图像被裁剪了，我通过查看代码知道这一点。

我也尝试将ajax中的POST方法更改为GET方法，但出现错误414，有什么帮助吗？

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

尝试给出该​​ajax调用的绝对路径，或者如果您的lib文件夹位于网站的根目录，则在lib之前使用反斜杠

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

它可能会帮助您。