jQuery and Google URL Shortener API

Question

I'm trying to shorten a URL using the http://goo.gl API with the following jQuery function

$.ajax({
        url: 'https://www.googleapis.com/urlshortener/v1/url?key=MY_API_KEY',
        crossDomain: true,
        type: 'POST',
        contentType: 'application/json',
        data: '{longUrl:"'+encodeURI(url)+'"}',
        dataType: 'jsonp',
        success: function(e) {
            alert(JSON.stringify(e));
        }
     });

And I get the following Error in JSON :

{"error":{"errors":[{"domain":"global","reason":"required","message":"Required parameter: shortUrl","locationType":"parameter","location":"shortUrl"}],"code":400,"message":"Required parameter: shortUrl"}}

Why does it ask for a Short URL? What am I doing wrong?

Try with JSONP or do it server-side. – marko Sep 11 '12 at 05:31 — marko, Sep 11 '12 at 05:31

Alex Turpin · Accepted Answer · 2011-07-15T14:42:18.177

6

You can't do a cross-domain POST in JavaScript. What jQuery actually does when you mention crossDomain to be true and the dataType to be jsonp is a jsonp request, which is just a hack to get data from another server using a tag. You get that error because it's as if you had just done a GET requets on the API page with no parameters. The other server needs to be aware of this and needs to support it.

The Goo.gl API page has no mention of jsonp at all which makes me believe it doesn't support it. Your best bet would be to write a proxy in PHP to do the requets for you and return the result, and then do an Ajax call on that PHP file.

Edit: If it's a Chrome extension, you can do a cross-domain Ajax call using a special Chrome method to get the URL to pass to the Ajax object. You also need to add the remote URL to your extension manifest file, as documented here.

edited Jul 15 '11 at 14:42

answered Jul 15 '11 at 14:28

Alex Turpin

46,743
23
113
145

im trying to shorten the url in a google chrome extension. i can use javascript only. is there anyway in which i can shorten the url using JS while building it into a google chrome extension. – smoizs Jul 15 '11 at 14:31
1

If it's an extension, try doing a request like it says on this page: http://code.google.com/chrome/extensions/xhr.html If that works, you can try passing the chrome.extension.getURL to jQuery's ajax URL parameter, but don't use the jsonp or cross domain settings. – Alex Turpin Jul 15 '11 at 14:33
1

AWesome ! worked like a charm .. thanks. Just for everyone out there .. the trick is to add https://www.googleapis.com in the permission of the manifest file ! – smoizs Jul 15 '11 at 14:36
It seems like jQuery is just ignoring `type:'post'` and making a get request anyways, how strange – Greg Guida Jul 15 '11 at 14:38
1

hey @Xeon06 - the extension is published .. check it out at https://chrome.google.com/webstore/detail/fnaceaedbnoemlaglkeogopkafkemkia – smoizs Jul 15 '11 at 15:16

score 3 · Answer 2 · answered Aug 12 '15 at 01:00

Here's a working code.

$.ajax({
        url: 'https://www.googleapis.com/urlshortener/v1/url?key={API-KEY}',
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        data: '{ longUrl: "' + longURL +'"}',
        success: function(response) {
            $('#inputBox').val(response.id);
        }
     });

jQuery and Google URL Shortener API

2 Answers2

Linked