第一个帖子在这里。
(在此原谅CSS,这项工作仍在进行中)
这是我的代表:https://repl.it/@Johnmexico/BlandElegantOrigin-1
我会尽力总结一下。我在JS文件的第7行声明了文本输入的值,然后尝试将其插入AJAX以及第22行的fetchAPIList函数中。
JS:
const artistName = $('.query').val();
function getDataFromApiSongs(endpoint, callback) {
$.ajax({
data: Object.assign(
{
apikey: APIKey,
format: 'json'
},
`q_artist=${artistName}`
),
contentType: 'application/json',
type: "GET",
url: MusicAPI + endpoint
})
.done(callback);
}
function fetchAPIList(){
getDataFromApiSongs(`track.search?q_artist=${artistName}&page_size=10&page=1&s_track_rating=desc`, (response) =>{...
HTML:
<fieldset>
<form action=# role="form" onsubmit="fetchAPIList()">
<label for="search-musixmatch" id="label">Find Songs by Artist</label>
<input class="query" type="text" placeholder="Search for Artist">
<input class="submit-button" type="submit">
</form>
</fieldset>
现在,如果我将其硬编码并使用诸如“ drake”之类的艺术家而不是$ {artistName}进行编码,那么我将得到我一直在寻找的当前十大Drake歌曲。如果我输入一个艺术家并提交自己的原始代码(该代码只会返回整个数据库中排名前10位的歌曲,而无需考虑任何参数。
所以我的问题是,如何正确地从输入中放入值并使用它从API中获取信息? (例如“ 2pac”或其他任何艺术家),因为显然,我现在所做的并不是正确的方法。
PS,您必须在浏览器中使用allow CORS扩展名,但是我敢肯定,你们中的许多人已经有了这样的插件。
谢谢你, 里卡多。
答案 0 :(得分:0)
主要问题是
const artistName = $('.query').val();
在您的页面首次加载时运行。因此,您将此时“查询”文本框中的值分配给artistName
。键入新值时,变量不会更新。您需要做的是询问fetchAPIList()函数运行时框的值是什么,然后在URL中使用它。
第二个问题是提交表单时运行了fetchAPIList()函数...但是您并没有阻止表单的默认行为,即将传统的整页回发到服务器。
将这两件事放在一起,并结合使用jQuery的事实,并且通常认为使用不显眼的事件处理程序(即,在主脚本中声明的事件处理程序,而不是嵌入HTML中的事件处理程序)是更好的做法,我们可以重新排列代码,如下所示:
HTML(此处的更改是,表单不再具有“ onsubmit”,但确实具有用于标识它的“ id”):
<fieldset>
<form action=# role="form" id="searchForm">
<label for="search-musixmatch" id="label">Find Songs by Artist</label>
<input class="query" type="text" placeholder="Search for Artist">
<input class="submit-button" type="submit">
</form>
</fieldset>
JS(将getAPIList函数更改为不显眼的事件处理程序,删除了未使用的watchSubmit和displaySongData函数,重新定义了getDataFromApiSongs函数以接受最新的artistName值):
const MusicAPI = "https://api.musixmatch.com/ws/1.1/";
const APIKey= "a2870731fab086760a6e7e1a767ceb86";
function getDataFromApiSongs(endpoint, artistName, callback) {
$.ajax({
data: Object.assign({
apikey: APIKey,
format: 'json' }, `q_artist=${artistName}`),
contentType: 'application/json',
type: "GET",
url: MusicAPI + endpoint}).done(callback);
}
//unobtrusive "submit" event handler written using jQuery syntax
$("#searchForm").submit(function(event) {
event.preventDefault(); //prevent default postback behaviour
var artistName = $(".query").val();
getDataFromApiSongs(`track.search?q_artist=${artistName}&page_size=10&page=1&s_track_rating=desc`, artistName, (response) =>{
const message = JSON.parse(response);
console.log(message.body)
const { message:{ body: {track_list = []}}} = message;
console.log(track_list);
let songDOM = ''
track_list.map((item) => {
const {track:{ track_name,artist_name, album_name }} = item;
songDOM += `<li><b>Title</b>: "${track_name}" by ${artist_name}, <i>${album_name}</i>`;
});
let songsList = document.getElementById('songsList')
songsList.innerHTML = songDOM;
$(".query").val("");
});
});