$ .getJSON - 显示单个标题

我是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?" 
    } 
    ] 
}

来源

2017-09-25 RafeeJ

使用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'); 
    }); 
    });

来源

2017-09-25 23:56:08 zlwaterfield

单击按钮时，我收到'Uncaught TypeError：无法读取未定义的属性'0'。这可能是什么原因造成的？ – RafeeJ

我根据你最初的问题写了这个例子。你必须检查你的反应结果是什么。我将'question'定义为'var question = result.questions [0];'所以我假设结果没有数组问题。 – zlwaterfield

我应该指定该结果在我原来的问题中返回JSON。它确实返回一些东西。 – RafeeJ

你的arent太遥远！

例如：

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?

那么你可以把他们变成的div需要使用jQuery：

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

，或者你可以添加一个新的div到＃div-a：

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

来源

2017-09-25 23:55:32

$ .getJSON - 显示单个标题

回答

相关问题