我是网络开发的新手,我对HTML和JavaScript几乎没有经验。
我必须使用最后一个fm api创建一个网站,其中我将有一个个人资料页面,其余信息通过处理来表示。
但我的问题是我没有从api获得任何信息,即使我认为我正在调用正确的api方法。
你能帮忙吗?
这是我没有处理文件的代码:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<link href='http://fonts.googleapis.com/css?family=Iceland' rel='stylesheet' type='text/css'>
<link href="music_universe_css.css" rel="stylesheet" media="screen" />
<script src="http://cloud.github.com/downloads/processing-js/processing-js/processing-1.4.1-api.js"></script>
<script type="text/javascript" src="jscript.js"></script>
</head>
<body>
<table id="tableLogoEinput">
<tr>
<th>
<table id="tableLogo">
<tr>
<th>
<img id= "logo" src="http://i1369.photobucket.com/albums/ag202/iKaelyn/GGG_zps5274496a.png" align="right">
</th>
<th>
<h1>Music Universe</h1>
</th>
</tr>
</table>
</th>
<th>
<input type="text" name="Username" placeholder="Username" id="search-text" required/>
<button type="button" id="go"/>Go!</button>
</th>
</tr>
<tr>
<td>
<button type="button" id="Artists"/>Artists</button>
</td>
<td>
<div id="status"></div>
<div id="tabela"></div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<button type="button" id="Friends"/>Common with Friends</button>
</td>
<td>
</td>
</tr>
</table>
</body>
</html>
JS:
/*jslint browser: true*/
/*global $, jQuery, alert*/
/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
/*global define */
// URL base para pedidos à API do Last.fm
var base_url = "http://ws.audioscrobbler.com/2.0/";
// chave API
var apikey = ****;
// URL base para pedidos à API do Last.fm - concatenar em cada pedido com nome do método a invocar e parâmetros do mesmo
var base_request = "http://ws.audioscrobbler.com/2.0/?api_key=****&format=json&method=";
// Nome do utilizador a analisar
var username;
// Array associativo com nome do utilizador como chave e valor de amizade como valor
var amigos = {};
var procura, getUserInfo, processUserInfo, log, logError, Artists, processArtists, ComumComAmigos, searching, searchAgain, getUserFriends, processUserFriends;
$(function () {
'use strict';
$("#go").click(procura);
});
function procura() {
'use strict';
username = $("#search-text").val();
searching();
getUserInfo();
}
function getUserInfo() {
'use strict';
var data = {
api_key: apikey,
method: "user.getInfo",
user: username,
format: "json"
};
$.get(base_url, data).done(processUserInfo).fail(logError("Loading information of " + username));
log("Loading information");
}
function processUserInfo(info) {
'use strict';
if (info.error) {
log("User " + username + " doesn't exists!<br/>Try again...");
searchAgain();
return;
}
username = info.user.name;
var realname = info.user.realname,
pais = info.user.country,
age = info.user.age,
genero = info.user.gender,
playlist = info.user.playlists;
$("#tabela").html("Username: " + username + " <br>Name:" + realname + " <br> Country:" + pais + " <br> Age:" + age + " <br> Gender:" + genero + "<br>Playlists:" + playlist + "<br/><table></table>");
$("#Artists").click(Artists);
$("#Friends").click(ComumComAmigos);
getUserFriends();
}
function getUserFriends(pageNumber) {
'use strict';
var data = {
api_key: apikey,
method: "user.getFriends",
user: username,
page: pageNumber,
format: "json"
};
$.get(base_url, data).done(processUserFriends).fail(logError("obter amigos do utilizador " + username));
console.log("Pedida informação de amigos do utilizador " + username + "...");
}
function Artists() {
'use strict';
var data = {
api_key: apikey,
method: "user.getInfo",
user: username,
format: "json"
};
$.get(base_url, data).done(processArtists).fail(logError("Loading information"));
log("Loading information");
}
function processArtists() {
'use strict';
}
function ComumComAmigos() {
'use strict';
}
function searching() {
'use strict';
$("#status").empty();
log("Procurando informação sobre " + username);
}
function searchAgain() {
'use strict';
$("#procura").show();
}
function log(message) {
'use strict';
$("#status").append(message + "<br/>");
}
function logError(actividade) {
'use strict';
return function (data) {
$("#status").append("Error " + actividade + ": " + data.statusText + "<br/>");
};
}