Question

我需要能够将我的ajax代码的responseText添加到变量中，以便可以将其添加到文本的一段中，但是除了我能够谷歌搜索的内容外，我基本上没有任何JS经验我在这个项目期间去做，所以任何帮助都将得到极大的帮助。

我的代码如下：

$.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

如果我没看错，您想在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调用成功块内更新canvas的内容。

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

Answer 2

由于$.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);
    },
  });
}

（可选）您可以使用jQuery ajax函数并使用async / await，请阅读How to Promisify an Ajax Call

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

2 个答案: