2017-04-07 43 views
0

`火星探測器的圖像AJAX請求

function displayImages(response) { 
 
\t $('#roverImages').empty(); 
 
\t for(var i =0; i < 9; i++){ 
 
\t \t 
 
\t  var li = $('<li>'); 
 
\t  
 
\t  var image = $('<img src=' + response.photos[i].img_src + '>').addClass("image-popup"); 
 
\t  li.append(image); 
 
\t  
 
\t  $("#roverImages").append(li); 
 
\t } 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>NASAPI</title> 
 
    <link rel="stylesheet" type="text/css" href="assets/css/reset.css"> 
 
    <link rel="stylesheet" type="text/css" href="assets/css/style.css"> 
 
    <link rel="shortcut icon" href="assets/images/favicon.png" type="image/x-icon"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
</head> 
 

 
<body> 
 
    <!-- JUMBOTRON --> 
 
    <div id="header" class="jumbotron"> 
 
     <div class="container"> 
 
      <!-- <p><a href="https://en.wikipedia.org/wiki/Spirit_(rover)" target="_blank"><img src="assets/images/rover.png" class="rover"></a></p> --> 
 
      <!-- <p class="txtrover">MER-A Spirit Rover</p> --> 
 
      <h1 class="txtjumbo" id="txtTitle">NASAPI</h1> 
 
      <p class="txtjumbo">Welcome to our NASA API web app!</p> 
 
      <p> 
 
       <a id="button" href="#" class="btn btn-primary btn-lg">MER Rovers</a><button id="apodButton" class="btn btn-lg btn-primary">Astronomy picture Of The Day</button> 
 
      </p> 
 
      <p class="quote">「It’s a fixer-upper of a planet but we could make it work.」 - Elon Musk, CEO of SpaceX</p> 
 
      <p id="mp3_player"> 
 
       <audio src="assets/music/interstellar.mp3" preload="auto" /> 
 
      </p> 
 
     </div> 
 
    </div> 
 
    <!-- END JUMBOTRON --> 
 
    <!-- MAIN --> 
 
    <div class="main" id="main-layout"> 
 
     <div class="row"> 
 
      <div id="roverRow" class="col-lg-3 col-md-3"> 
 
       <h1 class="main-text">Choose a rover</h1> 
 
       <h4 class="main-text-sol">Sol</h4> 
 
       <div id="sol-date" class="main-text-sol-day">0</div> 
 
       <input id="sol-selector" type="range" value=1 max=1656 min=1 /> 
 
       <p><img src="assets/images/curiosity.jpg" alt="Curiosity Rover" class="curiosityImage"> 
 
        <button id="curiosity" class="btn btn-lg btn-primary btn-center">Curiosity Rover</button> 
 
       </p> 
 
       <p><img src="assets/images/Spirit.jpg" alt="Spirit Rover" class="spiritImage"> 
 
        <button id="spirit" class="btn btn-lg btn-primary btn-center">Spirit Rover</button> 
 
       </p> 
 
       <p><img src="assets/images/Opportunity.jpg" alt="Opportunity Rover" class="opportunityImage"> 
 
        <button id="opportunity" class="btn btn-lg btn-primary btn-center">Opportunity Rover</button> 
 
       </p> 
 
      </div> 
 
      <div id="getRoverImages" class="col-lg-9 col-md-9"> 
 
       <h1 class="main-text">NASA API Documentation</h1> 
 
       \t <ul id="roverImages"> 
 
       \t \t 
 
       \t </ul> 
 
      </div> 
 

 
\t \t <!-- END MAIN --> 
 

 
\t \t <!-- APOD SECTION --> 
 

 
\t \t <div id="apod" class="apod"> 
 
\t \t \t <div class="container"> 
 
\t \t \t \t <h1 id="apod-text" class="apod-text">Astronomy Picture Of The Day</h1> 
 
\t \t \t \t <p><div><input id="date" type="text" class="form-control" placeholder="YYYY-MM-DD"></div><button id="buttonSubmit" class="btn btn-lg btn-primary btn-block">Submit</button></p> 
 
\t \t \t \t <div id="result"></div> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
      <script src="assets/music/audiojs/audio.min.js"></script> 
 
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script> 
 
      <!-- Latest compiled and minified JavaScript --> 
 
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
      <script type="text/javascript" src="assets/javascript/app.js"></script> 
 
</body> 
 

 
</html>

很新的編碼&試圖使一個簡單的Web應用程序,使一個AJAX請求到美國宇航局的火星車API從每個火星圖片好奇心,精神和機遇。我的代碼似乎與硬編碼確切的日期。我的問題是,如何讓應用程序與我創建的切換器一起工作(僅使用http://www.cssportal.com/style-input-range/中的一個),以便用戶可以切換日期並選擇他們想要的哪一個,以便應用程序更具交互性。

function roverData(name) { 
 
\t var sol = 200; //$("#sol"); 
 
\t $.ajax({ 
 
\t \t url: 'https://api.nasa.gov/mars-photos/api/v1/rovers/' + name.toLowerCase() +'/photos?sol='+ sol +'&api_key=u8vY57tt0UKbMXetRwOIfrBM7CMDI2eSTurQAJ72', 
 
\t \t method: "GET", 
 
\t }) 
 
\t .done(function(response) { 
 
\t \t console.log(response); 
 
\t \t displayImages(response); 
 
\t }); 
 

 

 

 
} 
 

 
$("#curiosity").on("click", function() { 
 
\t roverData("curiosity"); 
 

 
}); 
 

 
$("#spirit").on("click", function() { 
 
\t roverData("spirit"); 
 
}); 
 

 
$("#opportunity").on("click", function() { 
 
\t roverData("opportunity"); 
 
}); 
 

 

 

 

 
$("#sol-selector").on('change', function() { 
 
\t $("#sol-date").text($(this).val()) 
 
}) 
 

 
function solDays(response) { 
 

 
$("#sol-date").attr('max', res.photo_manifest.max_sol); 
 

 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

+0

是的,我剛剛加入它 –

回答

0

您可以用$('#sol').val()訪問範圍輸入的vaue。

function roverData(name, sol) { 
 
    console.log(name.toLowerCase(), sol); 
 
    $.ajax({ 
 
     url: 'https://api.nasa.gov/mars-photos/api/v1/rovers/' + name.toLowerCase() + '/photos?sol=' + sol + '&api_key=u8vY57tt0UKbMXetRwOIfrBM7CMDI2eSTurQAJ72', 
 
     method: "GET", 
 
    }) 
 
    .done(function(response) { 
 
     console.log(response); 
 
     displayImages(response); 
 
    }); 
 
} 
 

 
$("#show").on("click", function() { 
 
    roverData($('#rover').val(), $('#sol').val()); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="range" id="sol" min="1" max="500" value="200"> 
 
<select id="rover"> 
 
    <option value="Curiosity">Curiosity</option> 
 
    <option value="Spirit">Spirit</option> 
 
    <option value="Opportunity">Opportunity</option> 
 
</select> 
 
<input id="show" value="Show" type="button" />