如何将ajax response.responseText设置为全局JS变量

Question

我需要能够将ajax代码的responseText添加到变量中，这样我就可以将其添加到一段文本中，但我在任何类型的JS ecept方面都没有经验，因为我在这个项目中能够用谷歌搜索我，所以任何帮助都会非常有用。

我的代码如下：

$.ajax({
type: "POST",
url: "/ml/",
contentType: "application/base64",
data: window.dataURL,
dataType: "base64",
success: function(response) {
console.log(response);
},
error: function(err) {
console.log(err);
}
});

然后我需要能够像这样放置变量：

var para = document.getElementById("canvasimgtext");
para.textContent = responseText

他们所属功能的完整扩展：

function save() {
window.dataURL = canvas.toDataURL();
document.getElementById("canvasimg").style.border = "2px solid";
document.getElementById("canvasimg").src = dataURL;
document.getElementById("canvasimg").style.display = "inline";
document.getElementById("canvasimg").width = 32;
document.getElementById("canvasimg").height = 32;
$.ajax({
type: "POST",
url: "/ml/",
contentType: "application/base64",
data: window.dataURL,
dataType: "base64",
success: function(response) {
console.log(response);
},
error: function(err) {
console.log(err);
}
});
var para = document.getElementById("canvasimgtext");
para.textContent = responseText
}

提前感谢！

编辑
尝试了给出的答案，但没有成功：

$.ajax({
type: "POST",
url: "/ml/",
contentType: "application/base64",
data: window.dataURL,
dataType: "base64",
success: function(response) {
var para = document.getElementById("canvasimgtext");
para.textContent = response;
},
error: function(err) {
console.log(err);
}
});

当放置在此处时，按下按钮时文本将不再显示，即使传递的是简单字符串而不是变量。

第二版
原来问题是Flask没有返回成功，而是错误，所以这就是什么都没有发生的原因。

Answer 1

由于$.ajax()是一个异步调用，您必须在success回调中运行逻辑。

function save() {
window.dataURL = canvas.toDataURL();
document.getElementById('canvasimg').style.border = '2px solid';
document.getElementById('canvasimg').src = dataURL;
document.getElementById('canvasimg').style.display = 'inline';
document.getElementById('canvasimg').width = 32;
document.getElementById('canvasimg').height = 32;
$.ajax({
type: 'POST',
url: '/ml/',
contentType: 'application/base64',
data: window.dataURL,
dataType: 'base64',
success: function (response) {
var para = document.getElementById('canvasimgtext');
para.textContent = response.responseText;
},
error: function (err) {
console.log(err);
},
});
}

您可以选择promisify jQuery ajax函数并使用async/await，请阅读How to promisify an ajax Call

Answer 2

如果我没有错，您希望在Canvas中显示API调用后的图像。

function save() {
window.dataURL = canvas.toDataURL();
document.getElementById("canvasimg").style.border = "2px solid";
document.getElementById("canvasimg").src = dataURL;
document.getElementById("canvasimg").style.display = "inline";
document.getElementById("canvasimg").width = 32;
document.getElementById("canvasimg").height = 32;
$.ajax({
type: "POST",
url: "/ml/",
contentType: "application/base64",
data: window.dataURL,
dataType: "base64",
success: function(response) {
console.log();
var para = document.getElementById("canvasimgtext");
para.textContent = response
},
error: function(err) {
console.log(err);
}
});
}

由于AJAX是一个异步调用，您应该在AJAX调用的成功块内更新画布的内容。

您可能想了解更多关于Aysnc调用和AJAX的信息，这里有一个链接供您参考：AJAX