如何从 google 自定义搜索 API onclick 而不是 onload 加载图像

Question

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];             
      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">
          <button class="btn btn-info btn-md sc" style="margin-left:3px;" type="button" id="findNow" value="Search" >
           Search &nbsp;<i class="glyphicon glyphicon-search"></i>
          </button>
         </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>

你好朋友，我是 google 自定义搜索 API 和 jquery 的新手。

此代码在页面加载时非常完美，但我想在单击按钮时加载图像。如何在单击按钮时加载图像我试过其他人的代码，但它不能做我想要的。

我想从自定义搜索中获取 URL 图像并在 html 中显示该图像。

所以，请帮助我

Answer 1

在按钮中添加 json 调用函数 click.And 将输入字符串传递给 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">
          <button class="btn btn-info btn-md sc" style="margin-left:3px;" type="button" id="findNow" value="Search" >
           Search &nbsp;<i class="glyphicon glyphicon-search"></i>
          </button>
         </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>

如何从 google 自定义搜索 API onclick 而不是 onload 加载图像

How to load Images from google custom search API onclick instead of onload

javascript

jquery

json

google-custom-search