Question

我是JQuery和JSON的新手。

我正在尝试从我的服务器检索JSON，并在HTML文件的不同标头中显示每个部分。我不完全确定如何做到这一点，尝试了很多东西，我已经设法得到它，所以JSON显示在Chrome的控制台日志中。

现在我真的不明白如何抓住JSON的每个部分以显示在不同的div中。任何帮助将不胜感激。

HTML ：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.getJSON("http://10.240.211.221:5000/questions/1", function(result){
            console.log(result);
            });
    });
});


</script>
</head>
<body>

<button>Get JSON data</button>

<h1 id="question">Question will go here</h1>

<div id="optionA">
option A will go here
</div>

<div id="optionB">
option B will go here
</div>

</body>
</html>

JSON

{
  "question": [
    {
      "ID": 1,
      "a": "Yes",
      "aResult": 0,
      "b": "No",
      "bResult": 0,
      "question": "Are Jaffa Cakes biscuits?"
    }
  ]
}

Answer 1

使用JQuery，您可以使用.text()（http://api.jquery.com/text/）方法。我在下面写了一个例子。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $.getJSON("http://10.240.211.221:5000/questions/1", function(result){
          var question = result.questions[0];
          $(".question").text(question.question);
          $(".optionA").text(question.a);
          $(".optionB").text(question.b);
        });
      });
    });


    </script>
  </head>
  <body>

    <button>Get JSON data</button>

    <h1 class="question"></h1>

    <div class="optionA"></div>

    <div class="optionB"></div>

  </body>
</html>

这只会显示一个数组中的1个问题，因此如果您要返回多条消息并想要映射它们，您可以使用类似的内容。

  $.getJSON("http://10.240.211.221:5000/questions", function(result){
    var questions = result.questions;
    questions.map(function(question) {
      $('<div/>', {
        html: $('<h1/>', {
          html: question.question
        })
        .after(
          $('<div/>', {
            'text': question.a,
            'class': 'optionA'
          })
        )
        .after(
          $('<div/>', {
            'text': question.b,
            'class': 'optionB'
          })
        )
      }).appendTo('body');
    });
  });

Answer 2

你不是太远了！

例如：

var foo = {
  "question": [
    {
      "ID": 1,
      "a": "Yes",
      "aResult": 0,
      "b": "No",
      "bResult": 0,
      "question": "Are Jaffa Cakes biscuits?"
    }
  ]
};

console.log(foo.question.id)将返回1 console.log(foo.question.question)将返回Are Jaffa Cakes Biscuits?

然后你可以根据需要用jquery将它们推入div：

$('#div-a').text(foo.question.question);

或者您可以将新div添加到＃div -a：

$('#div-a').append($('<div>'>).text(foo.question.question)

$ .getJSON - 显示各个标题

2 个答案: