Question

所以我觉得我已经接近尾声了，我现在必须添加这个系列。如你所见，我有两个底部，其中包括搜索电影和搜索系列

这意味着我已经让电影工作得非常好，现在我已经离开了这个系列。现在的问题是我真的不知道如何制作，因此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 =＆＃34; {{3 }}＆＃34; +输入;

我希望我解释这是可以理解的。

编辑：我的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>

Answer 1

您可以将$('#searchSeries').prop('checked')发送到callAjax功能，例如：

var input = $('#s').val();
var isSeries = $('#searchSeries').prop('checked');

callAjax(input, isSeries);

然后，您可以在AJAX函数中更改API调用，如下所示：

function callAjax(input, isSeries) 
{ 
  var url = 'http://localhost:1337/search/' + (isSeries ? '/tv' : '') + input; 
  /* ... */
}

<强>更新

由于您不理解我上面所说的内容，因此下面是完整代码的代码段：

＆＃13;

function callAjax(input, isSeries) {
  var url = "http://localhost:1337/search/" + (isSeries ? '/tv' : '') + 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();
    var isSeries = $('#searchSeries').prop('checked');
    callAjax(input, isSeries);
  });

});

＆＃13;

Answer 2

您可以像这样设置您的网址：

var url = "http://localhost:1337/search/" + $('input[name="check"]:checked').val();

Answer 3

您必须向API提供单选按钮的值。您可以使用以下方法轻松获取单选按钮的值：

var radioSelection = $('#searchInContainer').find('input[name=check]:checked').val();

然后将其插入您的API网址：

var url = "http://localhost:1337/search/" radioSelection + input;

注意：您需要更改单选按钮的值以获得所需的输出。

例如，使用您当前的值和上述代码，当您选择＆＃39;系列＆＃39;时，它将输出＆＃34; http://localhost:1337/search/web＆＃34; +输入。

Answer 4

将ajaxCall函数更新为此类

更新（来自评论）

function callAjax(input) {
    var optionSelected = $('input[name="check"]:checked').val();
    console.log(optionSelected);

    var url;

    if (optionSelected === 'site') { // for Search movie
        url = "http://localhost:1337/search/" + input
    } else {
        // your other URL here for search series
        url = "http://localhost:1337/searchseries/" + input
    }

    $.ajax({
        type: 'GET',
        url: url,
        success: function (data) {
            if (data) {
                // you may have to fetch the value again here... not sure
                // var optionSelected = $('input[name="check"]:checked').val();

                if (optionSelected === 'site') {
                    handleMovieResponse(data);
                } else {
                    handleSeriesResponse(data);
                }
            } else {
                $("#lblerror").text("No movies were found!");
                $("#lblerror").removeClass("hide");

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

function handleMovieResponse(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");
}

function handleSeriesResponse(data) {
    // your code for series here
}

两个按钮，用Jquery做两件不同的事情

4 个答案: