Question

我正在尝试使用JavaScript和JQuery创建测验。我在Azure blob存储中存储测验（问题，选项）的数据。

当json本地存储在同一文件夹中并使用getJSON进行调用时，它可以正常工作。根据这个帖子，Query JSON data from Azure Blob Storage with jQuery，如果内容在Azure blob存储中，那将无法工作，但是当我尝试按照线程中的描述进行修改时，我什么也得不到。任何帮助是极大的赞赏。下面，我已经包含了我的HTML，JSON和JS。

HTML：

<!DOCTYPE HTML>
  <head>
    <title>HTML5 - Multiple Choose Quiz Sample</title>
    <link href="main.css" rel="stylesheet" type="text/css"/>
    <script src="jquery.js"></script>
    <script src="controller.js"></script>
    <script type="text/javascript" src="https://djmblob.blob.core.windows.net/quizzes/activity.json"></script>
    <!--Adjust for mobile phones-->
    <meta name=viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">   
  </head>
  <body>
    <!--comenting out for now...tes<div id="topbar">HTML5 MCQ Quiz</div>-->
    <!--comenting out for now...<div class="spacer"></div>-->
    <div id="navContent">
        <div id="game1"></div>
        <div id="game2"></div>
    </div>
  </body>

JSON：

dataCallback({"quizlist":[

{
"question":"Josh Hutcherson is known for his main role in the movie series The Hunger Games, but in what other movie was he the main character?",
"option1":"The Polar Express",
"option2":"John Tucker Must Die",
"option3":"The Alamo"
},
{
"question":"Who was the villain in Othello?",
"option1":"Iago",
"option2":"His Wife",
"option3":"Cassio"
},
{
"question":"What was Will Smith’s character Mike Lowery’s middle name in the movie series Bad Boys?",
"option1":"Eugene",
"option2":"Eric",
"option3":"Brian"
},
{
"question":"At the 2001 Academy Award, what movie won both the Best Picture and Best Actor in a Leading Role award?", 
"option1":"Gladiator",
"option2":"Traffic",
"option3":"Erin Brockovich"
},
{
"question":"Who was the original killer in Friday the 13th?",
"option1":"Jason's mother",
"option2":"Freddy",
"option3":"Jason"
},
{
"question":"Who played the main female role in G.I. Jane?",
"option1":"Demi Moore",
"option2":"Megan Fox",
"option3":"Lucy Lu"
},
{
"question":"In what year was Dude, Who Stole My Car? released?",
"option1":"2000",
"option2":"2005",
"option3":"2014"
},
{
"question":"What character does Michael B. Jordan play in the 2015 Fantastic 4?",
"option1":"Human Torch",
"option2":"Mister Fantastic",
"option3":"Thing"
},
{
"question":"Who played the voice of the Lorax?",
"option1":"Danny DeVito",
"option2":"Mel Gibson",
"option3":"George Clooney"
},
{
"question":"What was the character's name Tom Hanks played in the Green Mile?",
"option1":"Paul Edgecomb",
"option2":"John Coffey",
"option3":"Percy Wetmore"
}
    ]       
    })

JS：

$(document).ready(function () {

  var questionNumber=0;
  var questionBank=new Array();
  var stage="#game1";
  var stage2=new Object;
  var questionLock=false;
 var numberOfQuestions;
 var score=0;

function dataCallback(data) {

    for(i=0;i<data.quizlist.length;i++){ 
        questionBank[i]=new Array;
        questionBank[i][0]=data.quizlist[i].question;
        questionBank[i][1]=data.quizlist[i].option1;
        questionBank[i][2]=data.quizlist[i].option2;
        questionBank[i][3]=data.quizlist[i].option3;
    }
     numberOfQuestions=questionBank.length; 


    displayQuestion();
    }//gtjson

 function displayQuestion(){
 var rnd=Math.random()*3;
rnd=Math.ceil(rnd);
 var q1;
 var q2;
 var q3;

if(rnd==1){q1=questionBank[questionNumber][1];q2=questionBank[questionNumber][2];q3=questionBank[questionNumber][3];}
if(rnd==2){q2=questionBank[questionNumber][1];q3=questionBank[questionNumber][2];q1=questionBank[questionNumber][3];}
if(rnd==3){q3=questionBank[questionNumber][1];q1=questionBank[questionNumber][2];q2=questionBank[questionNumber][3];}

$(stage).append('<div class="questionText">'+questionBank[questionNumber][0]+'</div><div id="1" class="option">'+q1+'</div><div id="2" class="option">'+q2+'</div><div id="3" class="option">'+q3+'</div>');

 $('.option').click(function(){
  if(questionLock==false){questionLock=true;    
  //correct answer
  if(this.id==rnd){
   $(stage).append('<div class="feedback1">Correct</div>');
   score++;
   }
  //wrong answer    
  if(this.id!=rnd){
   $(stage).append('<div class="feedback2">Incorrect</div>');
  }
  setTimeout(function(){changeQuestion()},500);
 }})
}//display question

function changeQuestion(){

    questionNumber++;

if(stage=="#game1"){stage2="#game1";stage="#game2";}
    else{stage2="#game2";stage="#game1";}

if(questionNumber<numberOfQuestions){displayQuestion();}else   {displayFinalSlide();}

 $(stage2).animate({"right": "+=800px"},"slow", function() {$(stage2).css('right','-800px');$(stage2).empty();});
 $(stage).animate({"right": "+=800px"},"slow", function() {questionLock=false;});
}//change question

function displayFinalSlide(){

    $(stage).append('<div class="questionText">You have finished the quiz!<br><br>Total questions: '+numberOfQuestions+'<br>Correct answers: '+score+'<br><br><a href="../../index.html">Exit</a></div>');

}//display final slide







});//doc ready

Answer 1

所以我通过使用jQuery中的ajax函数调整我的JS，如下所示找到了解决方案。位于此处的解决方案http://blogs.msdn.com/b/tconte/archive/2011/08/10/accessing-windows-azure-blob-storage-using-jquery.aspx让我走上了正确的道路。我希望这有助于其他人。

$.ajax({
                url: 'https://djmblob.blob.core.windows.net/quizzes/activity.json',
                dataType: 'jsonp',
                jsonpCallback: 'dataCallback',
                success:    function (data) {

    for(i=0;i<data.quizlist.length;i++){ 
        questionBank[i]=new Array;
        questionBank[i][0]=data.quizlist[i].question;
        questionBank[i][1]=data.quizlist[i].option1;
        questionBank[i][2]=data.quizlist[i].option2;
        questionBank[i][3]=data.quizlist[i].option3;
    }
     numberOfQuestions=questionBank.length; 


    displayQuestion();
    }//gtjson
});

未从Azure blob存储查询返回JSON数据

1 个答案: