无法获取 AJAX 的 post 值（纯 Javascript）

Question

我知道这个问题已在此论坛 (Unable to get values in POST php web serivce) 中得到解答，但问题和答案都使用了 jQuery，就我而言，我无法使用它（无论如何）...

所以，我有一个 Javascript 文件，旨在制作画布的“屏幕捕获”（使用“toDataURL()”函数）并使用 AJAX 将其发送到 PHP 文件。由于要发送的数据很长，不能使用“GET”方法（AJAX返回414错误：“URL TOO LONG”），所以需要使用“POST”。

我遵循了一些关于 plain Javascript 的示例（这些示例并不容易找到，因为每个人都使用 jQuery！:P），我的代码如下所示：

var dataURL = me.video.getScreenCanvas().toDataURL();

var req = false;
try{
req = new XMLHttpRequest();
} catch (e){
// IE
try{
    req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
    // try an older version
    try{
    req = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e){
    return false;
    }
}
}

req.onreadystatechange = function(){
    if(req .readyState == 4){
    if(req.status == 200)
    { 
        console.log("RESULT AJAX: "+req.responseText);
    }else{ 
        console.log("ERROR AJAX: returned status code "+req.status+" "+req.statusText); 
    }
    }
}

req.open("POST", "http://www.mywebpage.com/image_upload.php", true);
req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
req.send("imgdata="+dataURL);

当尝试记录“dataURL”变量的内容时，它会记录一个像“image/png...blablabla”这样的大字符串，所以我认为数据是按预期生成的。

此时，PHP 文件只是尝试检索结果：

<?php

$imageData = '';

if(isset($_POST['imgdata']))
{
    echo "correct POST!";
    $imageData = $_POST['imgdata'];
}else if(isset($_GET['imgdata'])){
    echo "correct GET!";
    $imageData = $_GET['imgdata'];
}

echo "ImgData: ".$imageData;

if($imageData != '')
{
    $imageData = str_replace(' ','+',$imageData);
    $decodedData = base64_decode($imageData);

    if(file_put_contents('imatge1.jpeg', $decodedData) !== FALSE)
    {
        echo "Image has been successfully processed...?";
    }else{
        echo "Error trying to process the image...";
    }
}

?>

但是，PHP 文件没有回显“POST”或“GET”消息，“ImgData”回显返回空，并且没有回显“成功”或“处理图像时出错”消息......所以 PHP 文件似乎无法检索到 AJAX 的“POST”方法传递的数据。

我做错了什么？我怎样才能只使用 plain Javascript 来解决这个问题（不要使用 jQuery 很重要）？

提前感谢您的时间和精力！ :)

Answer 1

我更改了您的 javascript，并对此进行了测试，如果它适用于您，请尝试：

function create_XHR(){
    var XHR = null;
    if (window.XMLHttpRequest){
        XHR = new XMLHttpRequest();
    }
    else if(window.ActiveXObject){
        try {
            XHR = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            XHR = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    else {
        alert("Your navigator is old to run objets XMLHTTPRequest...");
        XHR = false;
    }
    return XHR;
}


function ajax_post(page, data) {

    var XHR = create_XHR();
    XHR.open("POST", page, true);
    XHR.onreadystatechange = function() {
        if (XHR.readyState === 4 && (XHR.status === 200 || XHR.status === 0)) {
            console.log("Success Transaction");
        }
    };
    XHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    XHR.send(data);
}


//Running the code :
//==================
var dataURL = me.video.getScreenCanvas().toDataURL();
ajax_post("http://www.mywebpage.com/image_upload.php", {"imgdata":dataURL});

---

修改 cors http ： 在服务器 PHP 中将其添加到页面的第一个“image_upload.php”：

//Part added by ilyas :
    if (isset($_SERVER['HTTP_ORIGIN'])) {
        header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
        header('Access-Control-Allow-Credentials: true');
        header('Access-Control-Max-Age: 86400');    // cache for 1 day
    }
//End of part.

Answer 2

我认为您需要在文件 httpd.conf 中配置服务器 apache

在 Apache 下，限制是一个可配置的值，LimitRequestLine。如果您想支持更长的请求 URI，请将此值更改为大于默认值 8190。

改变：

LimitRequestLine 4094

到一个值