Cross Domain URL

Question

I am trying to call this URL in my javascript code:

http://api.addressify.com.au/address/autoComplete?api_key=99acd24a-1c94-49ad-b5ef-6f90d0f126b1&term=1+George+st+t&state=nsw&max_results=5

This is my javascript code:

 $.ajax({
        url: 'http://api.addressify.com.au/address/autoComplete',
        type: 'GET',
        crossDomain: true, // enable this
        data: 'api_key=99acd24a-1c94-49ad-b5ef-6f90d0f126b1&term=1+George+st+t&state=nsw&max_results=5', // or $('#myform').serializeArray()
        success: function () { alert('PUT completed'); }
    });

I am getting error of Cross Domain URL in console.

Any help?

Answer 1

You need to use JSONP to make cross site request calls try this:

$.ajax({
        url: 'http://api.addressify.com.au/address/autoComplete',
        type: 'GET',
        dataType:'jsonp',
        jsonpCallback:'callback',
        data: 'api_key=99acd24a-1c94-49ad-b5ef-6f90d0f126b1&term=1+George+st+t&state=nsw&max_results=5&jsonp=callback', // or
    success: function(json) {
       console.dir(json);
    },
    });

Calling the addressify service with the parameter 'jsonp' will make the service wrap the response in a callback function, which then jquery ajax uses to retrieve the data. So the $.ajax parameter 'jsonpCallback' must match the parameter you pass to the service 'jsonp' (in their documentation)

Fiddle here:

http://jsfiddle.net/luisvsilva/cL1c3t4j/1/

Answer 2

Just add the data to the URL section of your ajax call.

$.ajax({
    url: 'http://api.addressify.com.au/address/autoComplete?api_key=99acd24a-1c94-49ad-b5ef-6f90d0f126b1&term=1+George+st+t&state=nsw&max_results=5',
    type: 'GET',
    crossDomain: true, // enable this
    success: function () { alert('PUT completed'); }
});

If you can't hard code some of this data you can turn the url declaration into a function.

url: function() { 
    return "http://api.addressify.com.au/address/autoComplete?api_key=" this.get("api_key") + "&term=" + this.get("term") + "&state=" + this.get("state") + "&max_results=" + this.get("max_results") }

}

I'm using the backbone model methods for getting the data - use whatever you need to do.