gpt4 book ai didi

javascript - Jquery/Ajax - 在 HTML 中获取图片和 Youtube

转载 作者:行者123 更新时间:2023-11-30 16:31:24 25 4
gpt4 key购买 nike

所以我又回到这里,试图弄清楚如何正确使用 HTML,但在尝试了很多小时之后却无法使其正常工作。

无论如何,我正在努力使图片和 youtube 预告片应该显示在 HTML 中,我搜索的是这样的东西。

I want like this

现在我正在寻找制作类似图片的东西,但要显示图片和带有预告片的播放器

所以基本上我希望它看起来像第一张图片,到目前为止我已经做到了:

    <!DOCTYPE html> 
<html>
<head>
<title>Movies</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function callAjax(input)
{
var url = "http://localhost:1337/search/" + input;

$.ajax({
type:'GET',
url: url,
success: function(data)
{
console.log('SUCCESS');
$('#title').html("Title: " + data.title);
$('#release').html("Release: " + data.release);
$('#vote').html("Vote: " + data.vote);
$('#overview').html("Overview: " + data.overview);
$('#poster').html("Poster: " + data.poster);

},
error: function(request, status, err)
{
console.log('ERROR');
}
});
}

$(document).ready(function(){

$('#get-json').on('click', function(e){
e.preventDefault();

var input = $('#data').val().trim();
callAjax(input);
});

});

</script>

<body>
<center>
<div>
<input type="text" id="data" name="data" size="15" maxlength="120" />
<button type="submit" value="search" id="get-json">Search</button>
</div>

</center>

<section>
<div id="json-output"></div>
<div id="title"></div>
<div id="release"></div>
<div id="vote"></div>
<div id="overview"></div>
<div id="poster" img src="data.poster" style="width:104px;height:142px;"></div>

</section>
</body>
</html>

也忘了说我在这方面很新,以前从来没有真正做过 HTML 并且一直试图弄清楚这个有一段时间没有结果:(

最佳答案

您需要为 JSON 元素创建占位符。首先在没有 JSON 的情况下编写一个看起来像你想要的 HTML 页面示例。该页面应该包含 div 的元素(例如 title ) , release等等。这些元素应该有它的类或 ids 来解决(因为它已经有了 <div id="json-output"> )

您不必将 JSON 字符串化。最好使用 JSON,因为您可以处理它的元素。例如,要将值设置到特定的占位符元素中,您可以使用:

$('#title').html(data.title);
$('#relese').html(data.release);
$('#vote').html(data.vote);

关于javascript - Jquery/Ajax - 在 HTML 中获取图片和 Youtube,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33269724/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com