使用jquery根据RESTAPI的json响应更改html结构

mutmk8jj 于 2021-09-13 发布在 Java

关注(0)|答案(2)|浏览(330)

我有一个RESTAPI，它返回一个json对象，如下所示

{
 "id": 1,
 "status": "open"
}

其中状态可以是“打开”或“关闭”。我使用jquery函数在html页面中调用此api：

<html>
<body>
</body>
<script>

    $(document).ready(function() {
          $.getJSON("http://localhost:8080/api/question/1", function(data){

          });
        });
</script>

若返回的json对象的状态为“打开”，我想如下更改我的html页面

<html>
    <body>
<p>THE QUESTION IS OPEN</p>
    </body>
    <script>

        $(document).ready(function() {
              $.getJSON("http://localhost:8080/api/question/1", function(data){

              });
            });
    </script>

否则，如果返回的json对象的状态为“closed”，我想如下更改我的html页面

<html>
    <body>
<p>THE QUESTION IS CLOSED</p>
    </body>
    <script>

        $(document).ready(function() {
              $.getJSON("http://localhost:8080/api/question/1", function(data){

              });
            });
    </script>

使用jquery实现这一点的最佳方法是什么？

JSON jquery JavaScript rest

来源：https://stackoverflow.com/questions/68512746/change-html-structure-according-to-json-response-from-a-rest-api-with-jquery

2条答案

按热度按时间

aoyhnmkz1#

你可以用 $('body').prepend() 将数据放在打开后的正确位置 <body> 标签

$(document).ready(function() {
  $.getJSON("http://localhost:8080/api/question/1", function(data) {
    if (data.status) {
      let str = `The Question is ${data.status}`.toUpperCase()
      $('body').prepend(`<p>${str}</p>`)
    }
  });
});

// for the example

let data = {
  "id": 1,
  "status": "open"
}
if (data.status) {
  let str = `The Question is ${data.status}`.toUpperCase()
  $('body').prepend(`<p>${str}</p>`)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

赞(0）回复(0）举报 2021-09-13

hsgswve42#

你两者都有 id 及 status 在json对象中。如果在同一页上有几个问题的状态段落，可以这样做：

$(document).ready(
  function() {
    $.getJSON("http://localhost:8080/api/question/1", function(data) {
      let statusParagraph = document.getElementById("status-" + data.id);
      let statusText;
      if (data.status === "open") {
        statusText = "THE QUESTION IS OPEN";
      } else if (data.status === "closed") {
        statusText = "THE QUESTION IS CLOSED";
      }

      statusParagraph.innerHTML = statusText;
    });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <body>
    <p id="status-1"></p>
    <p id="status-2"></p>
  </body>
</html>

赞(0）回复(0）举报 2021-09-13

我来回答

使用jquery根据RESTAPI的json响应更改html结构

2条答案

相关问题

热门标签

最新问答