我看过This Thread,但我看不出我做错了什么。你们知道为什么我收到此错误消息吗?我以为我将json转换为JavaScript对象?我把这部分搞砸了吗?
这是我的代码:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.css"></link>
</head>
<body>
<section id="title">
<h1>United States Population Search</h1>
<hr/>
</section>
<section id="inputArea">
<form>
<input type="text" id="inputBox" placeholder="Enter name of state." name="stateInput" autofocus required/>
<input type="submit" class="searchButton" value="Search"/>
<hr/>
</form>
</section>
<section class="searchResults">
<div class="hiddenTemplates">
<dl class="stateInformation">
<dt><u>Name of State:</u></dt>
<dd class="stateName"></dd>
<dt><u>Population Amount:</u></dt>
<dd class="statePopulation"></dd>
<dt><u>Population Density:</u></dt>
<dd class="statePopulationDensity"></dd>
</dl>
<div class="errorMessage">
<p><b>Error Message: Something has gone wrong, try your search again.</b></p>
</div>
</div>
</section>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
的JavaScript / jQuery的:
$(document).ready(function() {
/*Clicking the Search Button*/
$('.searchButton').on('click',function(event){
event.preventDefault();
var stateID = $('#inputBox').val();
getStateInformation(stateID);
})
//This function retrieves the said data
//http://www.census.gov/data/developers/data-sets/population-estimates-and-projections.html
//US, State, and PR Total Population and Components of Change
var getStateInformation = function(stateID){
//the parameters that we need to pass in our request to Spotify's API
var request = {
"key": 'da51191f5bc593a52cd303145364967a5deb1adb'
}
$.ajax({
type: "GET",
data: request,
url: "http://api.census.gov/data/2013/pep/natstprc",
dataType: "json",
})
//What the function should do if successful
.done(function(result){
var stateSearch = $('#inputBox').val();
showStateInformation(stateSearch);
})
//What the function should do if it fails
.fail(function(jqXHR, error){
var errorElem = showError(error);
})
}
//This functionclones the template box and fills in the result
var showStateInformation = function(stateSearch){
//in our results box, this will give us the name of the US State
var nameOfState = $('.stateName');
nameOfState.text = stateSearch;
console.log(stateSearch);
//in our results box, this will give us the population for that state
//based on the Census Data
var statePopAmount = result.find('.statePopulation');
statePopAmount.text(population);
//in our results box, this will give us the population density for that state
//based on the Census Data
//var statePopDensity = result.find('.statePopulationDensity');
//statePopDensity.text(populationDensity);
}
//The error message
var showError = function(error){
var errorElem = $('.templates .error').clone();
var errorText = '<p>' + error + '</p>';
errorElem.append(errorText);
}
})