如何在不使用我的代碼的情況下重寫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