javascript - 如何使用Jquery显示JSON内容

Question

JSON.stringify() 以 JSON 格式显示内容。我想要 quote 类中的引号和 character 中的字符 类。这样，单击按钮时我将收到消息并显示报价。

//HTML

<div class="container-fluid">
  <div class = "row text-center">
    <h2>GOT Quotes</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well quote">
      The message will go here
      <br>
      <div class = "col-xs-12 well character">
        Said By
      </div>
    </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

//JS

<script>$(document).ready(function () {
    $('#getMessage').click(function () {
        $.getJSON('https://got-quotes.herokuapp.com/quotes', function (json) {
            $('.quote').html(JSON.stringify(json));
        });
    });
});

Answer 1

这是你想要的吗？请注意，我将 quote 类移至 div 内的 span，这样您就不会覆盖嵌套的字符 div。我还使用了 .text() 而不是 .html()。如果您正在处理文本，这是正确的做法。

$(document).ready(function () {
    $('#getMessage').click(function () {
        $.getJSON('https://got-quotes.herokuapp.com/quotes', function (data) {
            $('.quote').text(data.quote);
            $('.character').text(data.character);
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class = "row text-center">
    <h2>GOT Quotes</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well">
      <span class="quote">The message will go here</span>
      <br>
      <div class = "col-xs-12 well character">
        Said By
      </div>
    </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>