两个按钮,用Jquery做两件不同的事情
WeI*_*his 5 html javascript css ajax jquery
所以我觉得我已经接近尾声了,我现在必须添加这个系列.正如你所看到的,我有两个底部,它说搜索电影和搜索系列
这意味着我已经让电影工作得很好,现在我离开了这个系列.现在的问题是我真的不知道怎么做,所以Javascript知道系列按钮是打开的,然后它应该采用我的API并按原样提供信息.我已经完成了我的电影JS,就像这样:
function callAjax(input)
{
var url = "http://localhost:1337/search/" + input;
$.ajax({
type:'GET',
url: url,
success: function(data){
if(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: <iframe width='420' height='315' src='https://www.youtube.com/embed/" + data.trailer + "' frameborder='0' allowfullscreen>");
$("#lblerror").addClass("hide");
} else {
$("#lblerror").text("No movies were found!");
$("#lblerror").removeClass("hide");
}
},
error: function(request, status, err){
console.log('ERROR');
}
});
}
$(document).ready(function(){
$('#submitButton').on('click', function(e){
e.preventDefault();
var input = $('#s').val();
callAjax(input);
});
});
我可以自己找到正确的方法等等.我现在唯一的问题是我不能,或者我不知道怎么做,当它的系列,它应该从这个URL获取信息:var url =" http:// localhost:1337/search /电视 "+输入;
我希望我解释这是可以理解的.
编辑:我的HTML看起来像这样只是为了确保你知道你们都能看到它.
<!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>The MovieTrailer 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="SearchMovie" checked />
<label for="SearchMovie" id="siteNameLabel">Search movie</label>
<input type="radio" name="check" value="web" id="SearchSeries" />
<label for="SearchSeries">Search series</label>
</div>
</fieldset>
</form>
<div id="lblerror"></div>
<aside>
<div id="title"></div>
<div id="release"></div>
<div id="vote"></div>
<div id="overview"></div>
<br>
<div id="trailer"></div>
</aside>
<div id="poster"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js"></script>
</html>