$ .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 - 顯示單個標題

回答

相關問題