代わりにonloadイベント

var url = "https://www.googleapis.com/customsearch/v1?key= Your API Key &cx=005124428384360536924:rstfldysumw&q=funny&searchType=image&safe=high"; 
 
$(function() { 
 
    var jqxhr = $.getJSON(url, function() { 
 
    console.log("success"); 
 
    }).done(function (data) { 
 
    for (var i = 0; i < 4; i++) { 
 
     var item = data.items[i];  \t \t \t \t \t \t \t \t \t 
 
     document.getElementById("content11").innerHTML += "<br><div class='c'>" 
 
      + "<div class='b'><img src="+ item.link +" height=200px width=200px /></div><div class='a mn-video-title'> " 
 
      + item.title+"</div></div>"; 
 
    }    
 
    }).fail(function (data) { 
 
    console.log("error"); 
 
    }); 
 
});

button#findNow { 
 
    height: 40px; 
 
    width: 154px; 
 
    margin: 20px; 
 
    border-radius: 5px; 
 
}

<!DOCTYPE html> 
 
<html prefix="og: http://ogp.me/ns#" xml:lang="en-gb" lang="en-gb" slick-uniqueid="3" xmlns="http://www.w3.org/1999/xhtml"> 
 
<?php include 'header.php'; ?> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
 
    <div id="lan_flanger"> 
 
    <div id="lan_musictted"> 
 
     <div id="rt-showcase"> 
 
     <div class="clear"></div> 
 
     <div id="rt-maintop"> 
 
      <div class="rt-container"> 
 
      <div class="rt-grid-10 rt-alpha"> 
 
       <div class="rt-block lan_album"> 
 
\t \t \t \t <div class="module-surround"> 
 
\t \t \t \t <div class="module-title mn-vidio"> 
 
\t \t \t \t  <h2 class="title">TOP IMAGES</h2> 
 
\t \t \t \t \t <form id="search-form" name="search-form"> 
 
\t \t \t \t \t \t <div style="margin-left:10px;" class="col-md-10"><input type="text" class="form-control sc" placeholder="Search...." id="search1" value="Funny" /></div> 
 
\t \t \t \t \t \t <div class="col-md-2 md"> 
 
\t \t \t \t \t \t \t \t \t <span class="input-group-btn"> 
 
\t \t \t \t \t \t \t \t \t \t <button class="btn btn-info btn-md sc" style="margin-left:3px;" type="button" id="findNow" value="Search" > 
 
\t \t \t \t \t \t \t \t \t \t \t Search &nbsp;<i class="glyphicon glyphicon-search"></i> 
 
\t \t \t \t \t \t \t \t \t \t </button> 
 
\t \t \t \t \t \t \t \t \t </span> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </form> 
 
       </div> 
 
        <div class="module-content"> 
 
         <div class="content"> 
 
         <div id="content11" style="display: inline-flex; margin-bottom: 15px;"></div> 
 
        </div> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <div class="clear"></div> 
 

 
    </div> 
 
    </div> 
 
<?php include 'footer.php'; ?> 
 

 
    <div class="gf-menu-toggle" style="display: none;"></div> 
 

 
    <div class="gf-menu-device-wrapper-sidemenu"> 
 
    <div class="gf-menu-device-container responsive-type-panel"> 
 
     <div class="gf-menu-device-container-wrapper"></div> 
 
    </div> 
 
    </div> 
 
    
 
    </body> 
 
</html>

こんにちは友人のonclickのGoogleのカスタム検索APIからイメージをロードする方法、私はGoogleのカスタム検索APIとjQueryに新しいです。

このコードはページの読み込みには最適ですが、ボタンをクリックすると画像が読み込まれます。ボタンをクリックして画像を読み込む方法他の人のコードを試しましたが、私がしたいことはできません。

カスタム検索からイメージのURLを取得し、そのイメージをhtmlで表示したいと考えています。そう

、

出典

2017-11-01 Nikul Khatik

はボタン内部json呼び出し機能を追加し、私を助けてくださいURLへ

$('#findNow').on('click',function(){ 
 
document.getElementById("content11").innerHTML =""; 
 
var a =$('#search1').val(); 
 
var url = "https://www.googleapis.com/customsearch/v1?key= Your API Key &cx=005124428384360536924:rstfldysumw&q="+a+"&searchType=image&safe=high"; 
 
    var jqxhr = $.getJSON(url, function() { 
 
    console.log("success"); 
 
    }).done(function(data) { 
 
    for (var i = 0; i < 4; i++) { 
 
     var item = data.items[i]; 
 
     
 
     document.getElementById("content11").innerHTML += "<br><div class='c'>" + "<div class='b'><img src=" + item.link + " height=200px width=200px /></div><div class='a mn-video-title'> " + item.title + "</div></div>"; 
 
    } 
 
    }).fail(function(data) { 
 
    console.log("error"); 
 
    }); 
 
})

button#findNow { 
 
    height: 40px; 
 
    width: 154px; 
 
    margin: 20px; 
 
    border-radius: 5px; 
 
}

<!DOCTYPE html> 
 
<html prefix="og: http://ogp.me/ns#" xml:lang="en-gb" lang="en-gb" slick-uniqueid="3" xmlns="http://www.w3.org/1999/xhtml"> 
 
<?php include 'header.php'; ?> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
 
<div id="lan_flanger"> 
 
    <div id="lan_musictted"> 
 
    <div id="rt-showcase"> 
 
     <div class="clear"></div> 
 
     <div id="rt-maintop"> 
 
     <div class="rt-container"> 
 
      <div class="rt-grid-10 rt-alpha"> 
 
      <div class="rt-block lan_album"> 
 
       <div class="module-surround"> 
 
       <div class="module-title mn-vidio"> 
 
        <h2 class="title">TOP IMAGES</h2> 
 
        <form id="search-form" name="search-form"> 
 
        <div style="margin-left:10px;" class="col-md-10"><input type="text" class="form-control sc" placeholder="Search...." id="search1" value="Funny" /></div> 
 
        <div class="col-md-2 md"> 
 
         <span class="input-group-btn"> 
 
\t \t \t \t \t \t \t \t \t \t <button class="btn btn-info btn-md sc" style="margin-left:3px;" type="button" id="findNow" value="Search" > 
 
\t \t \t \t \t \t \t \t \t \t \t Search &nbsp;<i class="glyphicon glyphicon-search"></i> 
 
\t \t \t \t \t \t \t \t \t \t </button> 
 
\t \t \t \t \t \t \t \t \t </span> 
 
        </div> 
 
        </form> 
 
       </div> 
 
       <div class="module-content"> 
 
        <div class="content"> 
 
        <div id="content11" style="display: inline-flex; margin-bottom: 15px;"></div> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="clear"></div> 
 

 
    </div> 
 
</div> 
 
<?php include 'footer.php'; ?> 
 

 
<div class="gf-menu-toggle" style="display: none;"></div> 
 

 
<div class="gf-menu-device-wrapper-sidemenu"> 
 
    <div class="gf-menu-device-container responsive-type-panel"> 
 
    <div class="gf-menu-device-container-wrapper"></div> 
 
    </div> 
 
</div> 
 

 
</body> 
 

 
</html>

出典

2017-11-01 05:56:19 prasanth

なしを入力文字列を渡すclick.And私はonclickの画像をロードしたいですオンロードでない –

ok更新された回答を参照してください。 – prasanth

ありがとうございますあなたの素晴らしい –

代わりにonloadイベント

答えて

関連する問題