我要完成的任务:单击图像可从spotify api检索艺术家信息,并将其显示为模态。我实现了在console.log和window.alert中检索和显示所需的信息。但是,我只是无法通过模态来处理它。我是fatfree(f3)php框架,引导程序,jquery。
这是jQuery部分:
(function(){
var artistId = "";
$(document).ready(function() {
let token =
"token";
// todo: get token from php variable
$("img").click(function() {
var artistId = $(this).attr("data-id");
$.ajax({
url: "https://api.spotify.com/v1/artists/" + artistId,
headers: { Authorization: "Bearer " + token },
success: function(result) {
$.ajax({
type: "POST",
data: {myData:result},
url: "/views/content/artistdetails.php",
success:
function(){
console.log('yes');
$('.modal').modal('show')
console.log(result);
},
error: function(e) {
console.log(e.message);
}
}
)
}
});
});
});
artistdetails.php作为模态(注意,我只是从引导复制了html,首先我需要显示它)
<div class="modal" tabindex="-1" role="dialog" id="myModal" data-toggle="modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="getCode">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
我浏览了很多有关该主题的文章,我只是没有发现错误。感谢您的帮助!
您需要在执行ajax的同一页面上放置模态。因此,如果要显示模式,则只需运行$('.modal').modal('show')
,但如果要在模式中显示Spotify API的响应,则可以执行以下操作:
<div class="modal" tabindex="-1" role="dialog" id="myModal" data-toggle="modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Spotify API Response</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="getCode">
<p id="getCodeText"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script>
(function() {
var artistId = "";
$(document).ready(function() {
let token =
"token";
// todo: get token from php variable
$("img").click(function() {
var artistId = $(this).attr("data-id");
$.ajax({
url: "https://api.spotify.com/v1/artists/" + artistId,
headers: {
Authorization: "Bearer " + token
},
success: function(result) {
console.log(result);
// Here you change the text of the <p></p> element in your modal's body.
$('#getCodeText').html(result);
// Here you show the modal.
$('.modal').modal('show');
}
});
});
});
});
</script>