JQuery在頁面加載時搜索

我使用的代碼如下：http://www.rahulsingla.com/blog/2011/08/itunes-performing-itunes-store-search-in-javascript根據關鍵字從Itunes中提取歌曲，但是我只想在頁面加載時提取歌曲而不必使用搜索框，讓我們說我的關鍵字「搜索關鍵字」，我想在頁面加載immidiately顯示歌曲或不使用搜索框刷新，這裏是下面的代碼：JQuery在頁面加載時搜索

<html> 
<head> 
    <title>iTunes - Music Search in javascript</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 

    <style type="text/css"> 
    .songs-search-result { 
     border: 1px solid Gray; 
     margin-bottom: 5px; 
     padding: 5px; 
    } 

    .songs-search-result .label{ 
     display: inline-block; 
     width: 200px; 
    } 
    </style> 

    <script type="text/javascript"> 
     function urlEncode(obj) { 
      var s = ''; 
      for (var key in obj) { 
       s += encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]) + '&'; 
      } 
      if (s.length > 0) { 
       s = s.substr(0, s.length - 1); 
      } 

      return (s); 
     } 

     function performSearch() { 
      var params = { 
       term: encodeURIComponent(jQuery('#search-keyword').val()), 
       country: 'US', 
       media: 'music', 
       entity: 'musicTrack', 
       //attribute: 'artistTerm,albumTerm,songTerm,musicTrackTerm', 
       limit: 20, 
       callback: 'handleTunesSearchResults' 
      }; 
      var params = urlEncode(params); 

      var url = 'http://ax.itunes.apple.com/WebObjects/MZStoreServices.woa/wa/wsSearch?' + params; 
      var html = '<script src="' + url + '"><\/script>'; 
      jQuery('head').append(html); 
     } 

     function handleTunesSearchResults(arg) { 
      var results = arg.results; 
      var html = ''; 
      for (var i = 0; i < results.length; i++) { 
       var item = results[i]; 
       var obj = { 
        source: 0, 
        track_id: item.trackId, 
        track_name: item.trackCensoredName, 
        track_url: item.trackViewUrl, 
        artist_name: item.artistName, 
        artist_url: item.artistViewUrl, 
        collection_name: item.collectionCensoredName, 
        collection_url: item.collectionViewUrl, 
        genre: item.primaryGenreName 
       }; 
       results[i] = obj; 

       html += '<div class="songs-search-result">'; 

       html += '<span class="label">Track:</span>{0}&nbsp;&nbsp;'.replace("{0}", obj.track_name); 
       html += '<a href="{0}" target="_blank">Preview</a>&nbsp;&nbsp;'.replace("{0}", item.previewUrl); 
       html += '<a href="{0}" target="_blank">Full Song</a>&nbsp;&nbsp;'.replace("{0}", obj.track_url); 
       html += '<span class="label">Track Price:</span>{0} {1}<br />'.replace("{0}", item.trackPrice).replace("{1}", item.currency); 
       html += '<span class="label">Artist:</span><a href="{0}" target="_blank">{1}</a><br />'.replace("{0}", obj.artist_url).replace("{1}", obj.artist_name); 
       html += '<span class="label">Collection:</span><a href="{0}" target="_blank">{1}</a><br />'.replace("{0}", obj.collection_url).replace("{1}", obj.collection_name); 
       html += '<span class="label">Collection Price:</span>{0} {1}<br />'.replace("{0}", item.collectionPrice).replace("{1}", item.currency); 
       html += '<span class="label">Primary Genre:</span>{0}<br />'.replace("{0}", obj.genre); 

       html += '</div>'; 
      } 
      jQuery('#itunes-results').html(html); 
     }  
    </script> 
</head> 

<body> 
    Please enter a search term below (e.g. Michael):<br /> 
    <input type="text" id="search-keyword" title="Enter Search Keyword" /> 
    <br /> 
    <input type="button" value="Perform iTunes Search" onclick="performSearch();" /> 

    <div id="itunes-results"> 
    </div> 
</body>

來源

2016-04-04 user3476168

$(document).ready(function() { 
performSearch(); 
}

添加這到你的腳本的末尾。它會在dom加載時執行搜索。

除了輪漲

來源

2016-04-04 17:30:43

遺憾的是它沒有工作，改變也許我只是不這樣做是正確的，讓例如說關鍵字是德雷克，我怎樣才能獲取德雷克歌曲和查看頁面加載結果，而不必搜索搜索框 – user3476168

在執行搜索功能的變化術語：encodeURIComponent（'德雷克'）， –

回覆：

$(document).ready(function() { 
    preformSearch("search-keyword"); 
}

然後更改preformSearch功能是這樣的：

function performSearch(keyword) { //add keyword parameter 
     var params = { 
      term: encodeURIComponent(keyword), // use the parameter 
      country: 'US', 
      media: 'music', 
      entity: 'musicTrack', 
      //attribute: 'artistTerm,albumTerm,songTerm,musicTrackTerm', 
      limit: 20, 
      callback: 'handleTunesSearchResults' 
     }; 
     var params = urlEncode(params); 

     var url = 'http://ax.itunes.apple.com/WebObjects/MZStoreServices.woa/wa/wsSearch?' + params; 
     var html = '<script src="' + url + '"><\/script>'; 
     jQuery('head').append(html); 
    }

來源

2016-04-04 17:41:45

不幸的是，它沒有工作，也許我我只是做得不對，例如說關鍵字是德雷克，我怎麼能拿到德拉克e歌曲並在頁面加載時查看結果，而無需在搜索框中搜索Drake – user3476168

<html> 
<head> 
<title>iTunes - Music Search in javascript</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 

<style type="text/css"> 
.songs-search-result { 
    border: 1px solid Gray; 
    margin-bottom: 5px; 
    padding: 5px; 
} 

.songs-search-result .label{ 
    display: inline-block; 
    width: 200px; 
} 
</style> 
</head> 
<body> 
<div id="itunes-results"></div> 
<script> 
    function urlEncode(obj) { 
      var s = ''; 
      for (var key in obj) { 
       s += encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]) + '&'; 
      } 
      if (s.length > 0) { 
       s = s.substr(0, s.length - 1); 
      } 

      return (s); 
     } 

     function performSearch(song) { 
      var params = { 
       term: encodeURIComponent(song), 
       country: 'US', 
       media: 'music', 
       entity: 'musicTrack', 
       //attribute: 'artistTerm,albumTerm,songTerm,musicTrackTerm', 
       limit: 20, 
       callback: 'handleTunesSearchResults' 
      }; 
      var params = urlEncode(params); 

      var url = 'http://ax.itunes.apple.com/WebObjects/MZStoreServices.woa/wa/wsSearch?' + params; 
      var script = document.createElement("script"); 
      script.src=url; 
      jQuery('head').append(script); 
     } 

     function handleTunesSearchResults(arg) { 
      var results = arg.results; 
      var html = ''; 
      for (var i = 0; i < results.length; i++) { 
       var item = results[i]; 
       var obj = { 
        source: 0, 
        track_id: item.trackId, 
        track_name: item.trackCensoredName, 
        track_url: item.trackViewUrl, 
        artist_name: item.artistName, 
        artist_url: item.artistViewUrl, 
        collection_name: item.collectionCensoredName, 
        collection_url: item.collectionViewUrl, 
        genre: item.primaryGenreName 
       }; 
       results[i] = obj; 

       html += '<div class="songs-search-result">'; 

       html += '<span class="label">Track:</span>{0}&nbsp;&nbsp;'.replace("{0}", obj.track_name); 
       html += '<a href="{0}" target="_blank">Preview</a>&nbsp;&nbsp;'.replace("{0}", item.previewUrl); 
       html += '<a href="{0}" target="_blank">Full Song</a>&nbsp;&nbsp;'.replace("{0}", obj.track_url); 
       html += '<span class="label">Track Price:</span>{0} {1}<br />'.replace("{0}", item.trackPrice).replace("{1}", item.currency); 
       html += '<span class="label">Artist:</span><a href="{0}" target="_blank">{1}</a><br />'.replace("{0}", obj.artist_url).replace("{1}", obj.artist_name); 
       html += '<span class="label">Collection:</span><a href="{0}" target="_blank">{1}</a><br />'.replace("{0}", obj.collection_url).replace("{1}", obj.collection_name); 
       html += '<span class="label">Collection Price:</span>{0} {1}<br />'.replace("{0}", item.collectionPrice).replace("{1}", item.currency); 
       html += '<span class="label">Primary Genre:</span>{0}<br />'.replace("{0}", obj.genre); 

       html += '</div>'; 
      } 
      jQuery('#itunes-results').html(html); 
     } 
$(function(){ 
    var songToLoad = 'Drake'; 
    performSearch(songToLoad); 
}); 
</script> 
</body> 
</html>

來跟你說實話，這不是一個很好的代碼這表示無論誰寫它，不瞭解jQuery，無論如何，我修改了一些代碼，查看並查看其中的差異，如果您想要更多解釋，請告訴我。

一件事，如果你想改變這首歌，它從這裏

var songToLoad = 'Drake';

Codepin

來源

2016-04-04 20:32:35

JQuery在頁面加載時搜索

回答

相關問題