使用烧瓶和 Ajax 更新图像

Question

运行一个网页，当我点击一个按钮时，我希望在服务器功能完成创建新图像服务器端后，在不重新加载页面的情况下替换现有图像。不过我遇到了 400 错误，所以在我打印 routes.py 中的数据以查看它传递的内容之前出现了问题，这意味着我对 flask routes.py 函数的 ajax 调用出现了问题。

图片：

        <div class="col-6">
            <div class="card">
                <img src="{{ user_image }}" alt="User Image" id="myImage"> 
            </div> 
        </div>

在我的 html 文件的末尾，我有这个脚本来尝试替换现有图像：

</body>
<script>
    $(document).ready(function() {
      $('#makeNewImage').click(function(){
        $.ajax({
          type: 'POST',
          url: "{{ url_for('getData') }}",
          headers: {"Content-Type": "application/json"},
          success: function(resp){
            $('myImage').attr('src', "static/img/" + resp);
          }
        });
      });
    });
  </script>
  </html>

在我的 flask routes.py 页面中：

 @app.route('/getData', methods=['POST'])
 def getData():
     // generate image, save image in /static/img/filename
     return filename

当我使用我原来的 xhr 函数时，传递数据和一切正常，但它不是自动更新，因为它是纯 JS。我收到带有此功能的 200 消息。

function getResults() {
  let xhr = new XMLHttpRequest();
  let url = "/getData";
  let error = false;
  if (!Array.isArray(myArray) || !myArray.length) {
    alert("No items selected.")
    error = true;
  } else {
  xhr.open("POST", url, true);
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log("I see this as an absolute win")
      }
    };
    xhr.onerror = function () {
      console.log("** An error occurred during the transaction");
    };
    param1 = document.getElementById('param1').value
    param2 = document.getElementById('param2').value
    param3 = document.getElementById('param3').value
    let data = JSON.stringify({"myArray": myArray, "param1 ": param1 , "param2 ": param2, "param3": param3});
    xhr.send(data);
    }
}

有人知道我的新 Ajax 代码尝试出现 400 错误的原因吗？