火星探测器图像AJAX请求

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

<!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>
                	<ul id="roverImages">
                		
                	</ul>
            </div>
		<!-- END MAIN -->
		<!-- APOD SECTION -->
		<div id="apod" class="apod">
			<div class="container">
				<h1 id="apod-text" class="apod-text">Astronomy Picture Of The Day</h1>
				<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>
				<div id="result"></div>
			</div>
		</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应用程序，向NASA的火星探测器API发出AJAX请求，以从好奇号，精神号和机遇号的每个火星探测器中获取图像。我的代码似乎可以硬编码确切的溶胶日期。我的问题是，如何让应用程序与我创建的切换开关(刚刚使用了 http://www.cssportal.com/style-input-range/中的切换开关(一起使用，以便用户可以切换溶胶天数并选择他们想要的切换，以便应用程序更具交互性。

function roverData(name) {
	var sol = 200; //$("#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);
	});
}
$("#curiosity").on("click", function() {
	roverData("curiosity");
});
$("#spirit").on("click", function() {
	roverData("spirit");
});
$("#opportunity").on("click", function() {
	roverData("opportunity");
});

$("#sol-selector").on('change', function() {
	$("#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>

您可以使用 $('#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" />

相关内容

最新更新

热门标签：