8

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?

Parkash
  • 105
  • 1
  • 12
  • 3
    For a cross domain Ajax request to work, the server must support cross domain access either with CORS or with JSONP. – jfriend00 May 12 '15 at 02:09
  • possible duplicate of [XMLHttpRequest cannot load an URL with jQuery](http://stackoverflow.com/questions/3828982/xmlhttprequest-cannot-load-an-url-with-jquery) – Nizam May 12 '15 at 02:25

2 Answers2

7

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/

Luis
  • 5,979
  • 2
  • 31
  • 51
1

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.

GreymondTheLong
  • 48
  • 1
  • 10