为Web浏览器使用Google URL Shortner API

时间:2015-08-22 15:39:21

标签: javascript google-api

我正在尝试使用Google URL Shortener API。我启用了Google URL Shortener API并生成了API密钥。我正在关注此示例http://hayageek.com/google-url-shortener-api/。但我无法缩短原始网址。

<html>

<head>
<link  type="text/css" rel="stylesheet"  href="css/bootstrap.css" />    
<link  type="text/css" rel="stylesheet"  href="css/style.css" />    
<script src="js/bootstrap.js"></script>    
<script src="js/jquery-1.11.3.js"></script>    
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">    
</script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js">        
</script>  
<link rel="stylesheet" type="text/css"   
href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
</head>
<body background="eiffel10.jpg">
<script src="js/bootstrap.js"></script>    
<script src="js/jquery-1.11.3.js"></script> 
<script src="js/jquery.contenthover.js"></script> 
<!-- Form   -->
<br/><br/><br/>
<div class="container">    
<div class="row">
<div class="col-md-4">

<h2></h2><br/>
<form class="form-inline" role="form" >
<div class="form-group">
<label for="url" class="col-sm-2 control-label">Original URL</label>                     
</div>

<div class="form-group">
<input type="text" name="url" id="longurl" class="form-control"  
placeholder="Enter your name ..."/>                     
</div> 
<div class="form-group">
<button type="button" onclick="shortIt();" class="btn btn-primary">Short 
It</button>              
</div>    
</form>
</div>
</div>
</div>   

<div id="output">Result</div>
<script type="text/javascript">
 function shortIt() 
 { var longUrl=document.getElementById("longurl").value;
  //Below alert is displayed
 alert(longUrl);
var request = gapi.client.urlshortener.url.insert({ "resource": {
          "longUrl": longUrl
    }
    });
// Below alert is not displayed on clicking the Short It so the problem is 
//with the request variable
alert("xcvbn");

    request.execute(function(response) 
    {   
        
    if(response.id != null)
    {
    str ="<b>Long URL:</b>"+longUrl+"<br>";
    str +="<b>Short URL:</b> <a href='"+response.id+"'>"+response.id+"</a><br>";
    document.getElementById("output").innerHTML = str;
}
    else
    {
    alert("error: creating short url n"+ response.error);
    }
 
    });
    }

function load()
{gapi.client.setApiKey('AIzaSyC6iiKUFLkzpyGdvI5QdLf3m1shuM8xxxx');

    gapi.client.load('urlshortener', 'v1',function()    
 {document.getElementById("output").innerHTML="";}); 
}
window.onload = load;   
 
</script>
<script src="https://apis.google.com/js/client.js"> </script>  
</body>
</html>

client.js的用途是什么,是否必须包含client.js

1 个答案:

答案 0 :(得分:1)

Google的官方开发者网站有一个page来解释这一点。

  1. Google的ajax API和bootstrap都需要服务器端执行。这就是为什么如果你在浏览器中静态打开它不起作用。所有这些都是动态组件,仅在服务器执行广告时才有效。
  2. 基本上,client.js是用于访问Google服务的javascript库。
  3. 专业提示: - 在您制作网站的过程中,始终使用本地服务器测试任何网站,这样当您将其在线上传到生产服务器时,您就不会感到惊喜。