Как установить ajax response.responseText в качестве глобальной JS переменной

Question

Мне нужно иметь возможность добавить responseText моего ajax кода в переменную, чтобы я мог добавить его к абзацу текста, но у меня практически нет опыта в любом виде 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

Поскольку $.ajax() это асинхронный вызов, вам придется запускать свои логики c внутри обратного вызова 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, прочитайте Как обещать Ajax Вызов

Answer 2

Если я не ошибаюсь, вы хотите отобразить изображение после вызова API в Canvas.

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 - это асинхронный вызов c, вам следует обновить содержимое canvas в блоке успеха вызова ajax.

Возможно, вы захотите немного больше узнать о вызовах Aysn c и AJAX, вот ссылка для справки: Ajax