Ajax responseText is empty

Ajax responseText is empty

本文关键字:empty is responseText Ajax      更新时间:2023-09-26

在过去的几天里,我了解了canvas元素,现在我想添加AJAX以将画布保存到服务器。具体来说,我让用户在画布上绘制,当他们完成后,他们单击一个按钮,画布被发送并保存到服务器。下面的代码运行良好。

Javascript:

var testCanvas = document.getElementById('imageView');
var canvasData = testCanvas.toDataURL("image/png");
var ajax = new XMLHttpRequest();
ajax.onreadystatechange=callback();
ajax.open("POST",'script.php',true);
ajax.setRequestHeader('Content-Type', 'canvas/upload');
ajax.send("canvasData"+canvasData );
function callback (){alert ('it works!');}

PHP代码:

<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
    // Get the data
    $imageData=$GLOBALS['HTTP_RAW_POST_DATA'];
    $filteredData=substr($imageData, strpos($imageData, ",")+1);
    $unencodedData=base64_decode($filteredData);
    $fp = fopen( 'images/'.uniqid().'.png', 'wb' );
    fwrite( $fp, $unencodedData);
    fclose( $fp );
        echo "saved";
}
  else{
  echo "no raw data";
  }
?>
但是,我希望将文件名和位置

返回到脚本,以便我可以向用户显示服务器端图像和位置。我还没有调整 php 代码,因为使用以下命令返回一个空字符串:

function callback () { alert (ajax.responseText);}

我已经搜索过,这个话题似乎已经解决了几次,但没有导致我能够解决上述问题。

我哪里出错了?

引用函数,不要调用它们,等待readyState返回4

var testCanvas = document.getElementById('imageView');
var canvasData = testCanvas.toDataURL("image/png");
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = callback;
ajax.open("POST",'script.php',true);
ajax.setRequestHeader('Content-Type', 'canvas/upload');
ajax.send("canvasData"+canvasData );
function callback (){
    if (ajax.readyState == 4) {
        alert(ajax.responseText);
    }
}