logo标签列表

两个按钮，使用Jquery执行不同的操作

javascriptjqueryhtmlcssajax
4

我认为我已经接近尾声，现在需要添加系列。如您所见，我有两个按钮，其中一个是搜索电影，另一个是搜索系列My website

这意味着我的电影功能已经相当不错，现在只剩下系列功能。问题在于我不知道如何让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); 
}); 

});

我可以自己找到正确的方法等等，但现在唯一的问题是，当它是系列时，我不能或者不知道如何从这个链接获取信息：http://localhost:1337/search/tv + input;
希望我已经解释清楚了。注意，我的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>
4个回答
3

您可以将 $('#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; 
  /* ... */
}

更新

由于您没有理解我上面所说的内容，下面提供了完整代码的片段：

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

});

我现在会尝试并查看效果，但是在 `$(document).ready(function(){ $('#submitButton').on('click', function(e){ e.preventDefault(); var input = $('#s').val(); var isSeries = $('#searchWeb').prop('checked');callAjax(input, isSeries)var input = $('#s').val(); callAjax(input); }); ` 结束后，我应该如何做呢？因为我可能会有两个几乎同名的东西。 - WeInThis
@WeInThis 我在答案中添加了完整的代码片段。 - Buzinas
是的，忘了告诉你哈哈。还有很好你能抓住我！ - WeInThis
@MaxZoom你在哪里看到两个具有相同id属性的小部件？ - Buzinas
为什么要使用这样的复杂选择器，而不是简单地通过ID进行检查？ - Buzinas
显示剩余5条评论
1

您需要向 API 提供单选按钮的值。 您可以通过以下方式轻松获取单选按钮的值：

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

然后使用以下方式将其插入到您的API网址中：

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

注意：您需要更改单选按钮的值才能获得所需的输出。
例如，使用当前值和上述代码时，当您选择“系列”时，它将输出“http://localhost:1337/search/web” + 输入内容。
嗯，我不太明白如何将它应用到我的代码中，我更多地是考虑创建一个函数(data) { 用于电影和函数(data){ 用于系列，然后只需复制粘贴即可。 - WeInThis
只需使用这两行代码，并在您的函数中替换“var url = ...”行。 - Kevin Lee
1

将您的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
}
哦，我无法理解关于“站点”的内容，而且由于它们是两个不同的$属性，我也无法获取从我的API中获取所有信息的其余代码。 - WeInThis
但我在想，它是否可以像这样工作：如果（已选电影）{跳转到电影信息} 否则 {跳转到剧集信息}? - WeInThis
哦，当然......如果API返回不同的属性，您可以在成功时调用两个单独的函数......让我更新我的答案。 - blurfus
您不必这样，先生！我已经解决了问题，非常感谢您花费时间帮助我！如果您知道如何做，也很高兴能看到它的实现:D - WeInThis
1
你可以像这样设置你的url变量：

var url = "http://localhost:1337/search/" + $('input[name="check"]:checked').val();
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接