无法使用ajax访问php文件

Question

我有一个页面，在那里人们可以上传图像并对其进行裁剪(为此，我使用了this plugin)，然后将裁剪结果保存在服务器中。

在查看文档后，我尝试了以下内容：

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

到目前为止，图像被保存在服务器中，它的路径也被保存，只剩下一个问题:页面需要重新加载才能看到图像的变化，ok，我们可以做得更好:更新图像而不是页面重新加载。

所以我在网上搜索了一下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

这可能会对你有帮助。