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

【问题标题】：How get JSON Response from Spring in Javascript如何在 Javascript 中从 Spring 获取 JSON 响应
【发布时间】：2019-11-21 21:54:47
【问题描述】：

我需要一点帮助，我从我的服务器 Spring Boot 在带有表单的 POST 之后以 JSON 格式发送响应，在发送数据和响应之后，网络打开一个模态，我需要从服务器生成 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 is not defined

我在modal中这样调用这个函数：

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

【问题讨论】：

您有两个选择 1. 在 onload 范围内调用您的函数 2. 将您的函数代码移动到 head 元素内
你能解释一下这个错误是什么意思吗？为什么没有定义？
可能是函数名在网络浏览器中完成加载之前已被调用...！
我试图将脚本放在中并给出同样的问题，现在我在另一个函数中调用了这个函数，并且工作，但 URL 未定义。进行调试时，函数 createURL 始终返回 null。
我用更多信息更新了这个问题。非常感谢您的帮助。

标签： javascript json spring spring-boot response

【解决方案1】：

我用这种方式固定，这是我的函数，如果一切正常，则获取实际响应并返回完整的 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;
}

【讨论】：

【解决方案2】：

在调用之前放置你的函数或在函数定义之后调用你的函数

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

【讨论】：

如果我想在 JQuery 中操纵 DOM（Css 和文本）的其他函数中调用此函数。使用变量var a=createURL，问题就解决了吗？
a=createURL(); a 未定义。为什么？进行调试时，函数 createURL 始终返回 null。
我用更多信息更新了这个问题。非常感谢您的帮助。
我也更新了答案。你可以直接使用它。它会工作

【解决方案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>

接下来就是：

HTML 中的<script> 不是内容生成，因此它不像模板引擎和服务器端脚本（PHP、ASP、JSP）中的某些特殊标记。无论您在<script> 标签中生成什么，它都不会显示
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>

【讨论】：