如何在Javascript中从Spring获取JSON响应

Question

我需要一点帮助，我从服务器Spring Boot用表单发送POST后以JSON格式发送JSON响应，在发送数据和响应后，Web打开一个Modal，我需要使用从服务器生成的URL并打印模态。 json是这样的：

{ url: "/somethin/something/index.html" }

我在Javascript中做了这个小功能，但始终返回null，我想因为我不返回createURL一无所有，所以我应该返回一个带有Json的对象，或者只返回一个Json特定值的字符串，我该怎么办？ ：

function createURL() {
    var xmlHttpRequest = new XMLHttpRequest();
    xmlHttpRequest.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            var json = JSON.parse(this.responseText);
            return json.URL;
        } else {
            return "No URL Created";
        }
    }
}

Chrome也给我这个错误：Uncaught ReferenceError：未定义createURL

我以这种方式在模式中调用此函数：

<div class="modal-body">
                    <script>createURL();</script>
                </div>

Answer 1

将函数放在调用之前或在函数定义之后调用函数

<div class="modal-body" id="myList">
</div>
 <script>
function createURL() {
var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        var json = JSON.parse(this.responseText);
        var textnode = document.createTextNode(json.URL);         
        document.getElementById("myList").appendChild(textnode);
    } else {
        var textnode = document.createTextNode("No URL Created");         
        document.getElementById("myList").appendChild(textnode);

    }
  }
}

createURL();
</script>

Answer 2

我以这种方式修复了，这是我的函数，如果一切正常，则返回实际响应，并返回完整的json，您可以在所需的任何其他函数或脚本中使用。

function getJSON(XMLHttpRequest) {
    var json;
        if (XMLHttpRequest.readyState==4 && XMLHttpRequest.status == 200) {
            json=JSON.parse(XMLHttpRequest.responseText);
        } else {
            json= "No JSON Complete";
        }
        return json;
}

Answer 3

当你这样做有一个createURL()的地方，你可以读取错误消息未捕获的ReferenceError：createURL 尚未确定 。 因此，请确保在您要使用函数定义时就可以使用它。 函数提升（将function和var定义收集到JavaScript作用域的开始）在<script>标记之间不起作用，因此它们的顺序很重要：

 <script> console.log("Trying something:"); try{ doSomething(); }catch(ex){ console.log("It did not work:",ex.toString()); } console.log("Trying something else:"); try{ doSomethingElse(); }catch(ex){ console.log("It did not work:",ex.toString()); } function doSomething(){ console.log("something"); } </script> <script> console.log("Trying something (second tag):"); try{ doSomething(); }catch(ex){ console.log("It did not work:",ex.toString()); } console.log("Trying something else (second tag):"); try{ doSomethingElse(); }catch(ex){ console.log("It did not work:",ex.toString()); } function doSomethingElse(){ console.log("something else"); } </script> 

然后剩下的：

1. HTML中的<script>不是内容生成的，因此它的行为不像模板引擎和服务器端脚本（PHP，ASP，JSP）中的某些特殊标记。 无论您在<script>标记中产生什么，它都不会显示
2. return -ing大部分事件处理程序回调的东西径直到垃圾桶。 就像onclick事件处理程序一样， onreadystatechange （或onload ）不会期望得到答案。 无论您想对JSON做什么，都应该在事件处理程序本身中完成。 稍后，您可以处理异步内容和承诺，但是要显示它，好吧，就显示它。

结合在一起：

<script>
  function createURL() {
    var xmlHttpRequest = new XMLHttpRequest();
    xmlHttpRequest.onreadystatechange = function () {
      if (this.readyState == 4 && this.status == 200) {
        var json = JSON.parse(this.responseText);
        urldiv.innerText=json.URL;
      } else {
        urldiv.innerText="No URL Created";
      }
    }
  }

  createURL();
</script>
<div class="modal-body" id="urldiv"></div>