2015-10-26 108 views
0

我不知道如何讓它工作,以便它從getrandomvideos中獲取變量並在jquery語句中使用它。我希望用戶按下一個按鈕,然後隨機選擇一個名稱,然後提交給jquery語句,然後格式化返回的JSON。在jQuery中使用函數的變量

<!doctype html> 
<html> 
    <head> 
     <title>Trove Basic Search</title> 
     <meta charset="utf-8"> 
     <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    </head> 

    <body> 

     <h2>Search Trove</h2> 

     <button type="submit" id="searchbtn">Search</button> 

     <hr /> 

     <div id="output"> 
      <h4>Search Results</h4> 
     </div> 

     <script type="text/javascript"> 

      function getRandomVideo() { 
         var searches = [ 
          'beethoven', 
          'mozart', 
          'beethoven', 
          'debussy', 
         ] 
         var rand = Math.floor(Math.random()*videos.length); 

         var search = searches[rand]; 

         return search 
        }    

      var apiKey = "jja10ssv4950uh65"; 
      var searchTerm = getRandomVideo(); 

      $(document).ready(function(){ 

       // There is an issue with TROVE applications where the first search will result in nothing being returned 
       // To get around this, we perform a dummy submit. Not sure how to do this 
       $("#searchbtn").submit 

       $("#searchbtn").submit(function() { 

        var url = "http://api.trove.nla.gov.au/result?key=" + apiKey + "&encoding=json&zone=newspaper&sortby=relevance&q=" + searchTerm + "&s=0&n=5&include=articletext,pdf&encoding=json&callback=?"; 

        console.log(url); 

        $.getJSON(url, function(data) { 

         $('#output').empty(); 

         $.each(data.response.zone[0].records.article, function(index, value) { 
          $("#output").append("<p>" + value.articleText +"</p>"); 
         }); 
        }); 
       }); 
      }); 
     </script> 
    </body> 
</html> 
+1

當前代碼發生了什麼? –

+0

我已經複製了從以前的網站,將有一個提交的表格,然後找到JSON的jQuery –

回答

0

,如果你只是它可能會更好將函數放入就緒函數中,並使用提交按鈕的點擊功能,如下所示:

$(document).ready(function(){ 

    function getRandomVideo() { 
    var searches = [ 
         'beethoven', 
         'mozart', 
         'beethoven', 
         'debussy', 
        ]; 
    // this should be searches.length 
    // var rand = Math.floor(Math.random()*videos.length); 
    var rand = Math.floor(Math.random() * searches.length); 
    var search = searches[rand]; 
    return search 
    } 

    var apiKey = "jja10ssv4950uh65"; 
    // just use click event 
    $("#searchbtn").click(function(e) { 
     // we disable default behavior of button 
     e,preventDefault(); 
     // here we call the function every time submit button clicked 
     var searchTerm = getRandomVideo(); 
     var url = "http://api.trove.nla.gov.au/result?key=" + apiKey + "&encoding=json&zone=newspaper&sortby=relevance&q=" + searchTerm + "&s=0&n=5&include=articletext,pdf&encoding=json&callback=?"; 
     console.log(url); 
     $.getJSON(url, function(data) { 
      $('#output').empty(); 
        $.each(data.response.zone[0].records.article, function(index, value) { 
         $("#output").append("<p>" + value.articleText +"</p>"); 
        }); 
       }); 
      }); 
     }); 
0

在當前實現中,您將在頁面加載時獲取該名稱,並且每次都會使用該名稱。每次用戶點擊時更改它。

替換行:

var url = "http://api.trove.nla.gov.au/result?key=" + apiKey + "&encoding=json&zone=newspaper&sortby=relevance&q=" + searchTerm + "&s=0&n=5&include=articletext,pdf&encoding=json&callback=?"; 

獲取新的視頻每到這個被稱爲

var searchTerm = getRandomVideo(); 
var url = "http://api.trove.nla.gov.au/result?key=" + apiKey + "&encoding=json&zone=newspaper&sortby=relevance&q=" + searchTerm + "&s=0&n=5&include=articletext,pdf&encoding=json&callback=?"; 
+0

我很困惑,因爲根本沒有任何改變,在該行。你的意思是改變線路的位置? –

+0

是的,改變位置以便在每次提交被調用時都進行評估 – Imran

0

時間試試這個代碼:

var url = "http://api.trove.nla.gov.au/result?key=" + apiKey + "&encoding=json&zone=newspaper&sortby=relevance&q=" + searchTerm + "&s=0&n=5&include=articletext,pdf&encoding=json&callback=?";