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

Posted 2023-02-27

【中文标题】如何在 Javascript 中从 Spring 获取 JSON 响应

【英文标题】：How get JSON Response from Spring in Javascript

【发布时间】：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。

我用更多信息更新了这个问题。非常感谢您的帮助。

【参考方案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>