google url shortener api and jquery not working

i cant seem to get google's new url shortener api to work with jquery's post method:

  $(document).ready(function() {
   $.post("https://www.googleapis.com/urlshortener/v1/url", { longUrl: "http://www.google.com/"},
      function(data){
        console.log("data" + data);
      });
   $('body').ajaxError(function(e, xhr, settings, exception) {
       $(this).text('fail'+e);
   console.log(exception);
   });
  });

all of this gives me an empty (data) response AND an empty (exception) response. any ideas?

ive also tried this with no success:

   $.ajax({
 type: 'POST',
 url: "https://www.googleapis.com/urlshortener/v1/url",
 data: { longUrl: "http://www.google.com/"},
 success: success,
 dataType: "jsonp"
   });

Answers


I was having the same problem of not being able to use Google Shortener API with jQuery, but after some research I got around with a simple JSON.stringify on the data

My final code looks like this:

    window.googleShAPI = 'YOUR_KEY';
    window.getShortURL = function(url,cb){
        $.ajax({
             url:'https://www.googleapis.com/urlshortener/v1/url?key='+window.googleShAPI,
             type:"POST",
             data:JSON.stringify({longUrl:url}),
             contentType:"application/json",
             dataType:"json",
             success: function(data){ cb(data.id); }
        });
    }

    // example of use:
    window.getShortURL('http://www.google.com/',function(u){console.log('ShortURL is:'+u);})

You need API key in order to use this API

This method requires one query parameter: Your API key (using the key query parameter). Note: You can omit the query parameter when making a limited number of calls, such as during the testing phase.

also response return in JSON

$.post("https://www.googleapis.com/urlshortener/v1/url?key=enter-your-api-key", { longUrl: "http://www.google.com/"},
  function(data){
    console.log("data" + data);
  }, "json");

I assume you have read the Google URL Shortener API reference instructions, but I do not see an API key in your code snippet:

POST https://www.googleapis.com/urlshortener/v1/url?key={key}

try setting the contentType, like this:

$.ajax({
 type: 'POST',
 contentType: "application/json"
 url: "https://www.googleapis.com/urlshortener/v1/url",
 data: { longUrl: "http://www.google.com/"},
 success: success,
 dataType: "jsonp"
   });

Try using getJson Method:

url="https://www.googleapis.com/urlshortener/v1/url";
data = {
    key:"your-api-key",
    shortUrl:"http://www.google.com"
};
$.getJSON(url, data, function(data, textStatus){
    if(data.status=="OK"){
        alert(data.longUrl);
        }
    });

You can't access Google's URL Shortening API using any of the methods currently described in these answers, due to cross-domain script access restrictions. See the discussion here for solutions: Cross Domain Issue with implementing Google URL shortener API

Thanks to tawman for this answer, but it was hidden in the comments and I didn't see it at first.


Best Solution found on this :

<html>
<head>
<title>URL Shortener using Google API. http://goo.gl </title>
<script src="https://apis.google.com/js/client.js" type="text/javascript"> </script>
</head>
<script type="text/javascript">
function load() {
    gapi.client.setApiKey('[GOOGLE API KEY]');
    gapi.client.load('urlshortener', 'v1', function() { 
        document.getElementById("result").innerHTML = "";

        var Url = "http://onlineinvite.in";
        var request = gapi.client.urlshortener.url.insert({
            'resource': {
            'longUrl': Url
            }
        });
        request.execute(function(response) {

            if (response.id != null) {
                str = "<b>Long URL:</b>" + Url + "<br>";
                str += "<b>Test Short URL:</b> <a href='" + response.id + "'>" + response.id + "</a><br>";
                document.getElementById("result").innerHTML = str;
            }
            else {
                alert("Error: creating short url \n" + response.error);
            }
        });
    });
}
window.onload = load;
</script>
<body>
<div id="result"></div>
</body>
</html>

Please replace the [GOOGLE API KEY]


Need Your Help

Is it possible to create nested tsql function for changing schema?

sql-server tsql nested

I want to create a user defined function that my customer can run on a database with their own schema (it will not be dbo always), for example: