2016-04-04 24 views
0

私は以下のコードを使用しています:http://www.rahulsingla.com/blog/2011/08/itunes-performing-itunes-store-search-in-javascriptキーワードに基づいてiTunesから曲を引き出すことはできますが、検索ボックスを使用せずにページを読み込むだけで曲を引き出すことができます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> 

答えて

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

追加:私のキーワードは、「検索キーワード」にあると言う、私はページの読み込みにimmidiatelyの曲を表示するか、検索ボックスを使用せずにリフレッシュしたいと思い、ここに以下のコードがありますこれはあなたのスクリプトの終わりまでです。 DOMがロードされたときに検索を実行します。倫張応答に加えて

+0

からそれを変更することが動作しませんでした、多分私はちょうどそれをやっておりません残念ながら、例えばすることができますキーワードがDrakeだと言うと、検索ボックスのDrakeを検索することなく、Drakeの曲を読み込み、結果をページロードで表示するにはどうすればよいですか?performSearch関数の変更用語で – user3476168

+1

:encodeURIComponent( 'Drake')、 –

0

:その後、

$(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); 
    } 
+0

残念ながら、ちょうどそれをやっていない、たとえば、キーワードはドレイクと言うことができます、どのように私はDrakをフェッチすることができます検索ボックスでDrakeを検索しなくても、ページの読み込み時に曲を表示したり、結果を表示できます – user3476168

0
<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

関連する問題