代码之家 › 专栏 › 技术社区 › Nikul Khatik prasanth

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

google-custom-search json jquery javascript

Nikul Khatik prasanth · 技术社区 · 7 年前

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>

朋友们好,我是谷歌自定义搜索API和jquery的新手。

这段代码是完美的页面加载,但我想加载按钮点击图像。如何在点击按钮时加载图像我尝试了其他人的代码,但它不能做我想要的。

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

所以,请帮帮我

1 回复 | 直到 7 年前

Nikul Khatik prasanth 7 年前

添加 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">
										<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>