gpt4 book ai didi

JavaScript - 将 JavaScript 与 HTML 连接起来

转载 作者:行者123 更新时间:2023-11-28 18:57:46 25 4
gpt4 key购买 nike

所以我首先制作了一个纯 HTML,我现在对此感到非常自豪,但由于某种原因我无法让 Javascript 与它一起工作。我以前从未真正使用过 Javascript。我昨天开始使用它并得到了一些帮助,但它不再起作用了。所以到目前为止我已经做到了: My site right now

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MovieTrailerbase</title>

<link rel="stylesheet" type="text/css" href="styles.css" />

</head>

<body>

<div id="page">

<h1>Movie Search</h1>

<form id="searchForm" method="post">
<fieldset>

<input id="s" type="text" />

<input type="submit" value="Submit" id="submitButton" />

<div id="searchInContainer">
<input type="radio" name="check" value="site" id="searchSite" checked />
<label for="searchSite" id="siteNameLabel">Search movie</label>

<input type="radio" name="check" value="web" id="searchWeb" />
<label for="searchWeb">Search series</label>
</div>

</fieldset>
</form>

<div id="resultsDiv"></div>
<div id="title"></div>
<div id="release"></div>
<div id="vote"></div>
<div id="overview"></div>
<div id="poster"></div>
<div id="trailer"></div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>

我怀疑我现在是否必须向你们展示 CSS,因为如果我是正确的话,它现在并没有做太多事情。

但是我正在使用这个 JS,它是我在此处的帮助下制作的,但它没有按计划进行。

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('<img src="' + data.poster + '" width=250 height=450 />');
$('#trailer').html("Trailer: " + data.trailer);



},
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);
});

});

所以基本上我的计划是,当我搜索在搜索框中写下的电影标题,然后按搜索时,它应该出现在我自己制作的 API 的信息下方,其中已经说明了 JavaScript 中的所有内容。所以我现在真正想做的是,当按下搜索时,它至少应该连接到 API 并说一些话以确保其正常工作。

编辑:我的计划是做这样的事情: plan

只是想向你们展示,以便你们有一个类似于我想要让它看起来像的想法。

最佳答案

这个:

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

...当单击带有 id=get-json 的元素时会执行某些操作。

还有这个:

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

...尝试从具有 id=data 的元素中读取值。

文档中的任何位置都没有具有这些 ID 的元素。

关于JavaScript - 将 JavaScript 与 HTML 连接起来,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33278159/

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