如何在不使用我的代码的情况下重写Ajax

Question

嗨，我目前正在尝试将画布上的图像保存到数据库中，但是我的代码使用了不允许使用的jQuery。 有人可以在不使用JQuery的情况下通过等效的ajax命令来帮助我，这是我的代码：

document.getElementById('save').addEventListener('click', function()
var canvas = document.getElementById("canvas");
var dataUrl = canvas.toDataURL("image/png");
$.ajax(
{
type: "POST",
url: "../webcam/save_image.php",
data: {image: dataUrl}
})
.done(function(respond){console.log("done: "+respond);})
.fail(function(respond){console.log("fail");})
.always(function(respond){console.log("always");})
});

Answer 1

您可以使用本机XMLHttpRequest对象来完成此操作。 我相信您的代码应该看起来像这样，尽管我尚未对其进行测试，所以我确定您需要对其进行一些调整。

document.getElementById('save').addEventListener('click', function()
var canvas = document.getElementById("canvas");
var dataUrl = canvas.toDataURL("image/png"), xhr = new XMLHttpRequest();


xhr.open('POST', '../webcam/save_image.php');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
    if (xhr.status === 200 && xhr.responseText !== dataUrl) {
        console.log('fail');
    }
    else if (xhr.status !== 200) {
        console.log('fail');
    }
};
xhr.send(encodeURI('url=' + dataUrl);

参考： https : //blog.garstasio.com/you-dont-need-jquery/ajax/#posting