How do I send a parameter containing a slash in GET request, via jQuery's .ajax() method?

Question

I need to create the following URL to call an API via jQuery's .ajax() function:

https://www.airnowapi.org/aq/forecast/zipCode/?format=application/json&zipCode=02144&date=2016-11-26&distance=25&API_KEY=API_KEY

I know how to form this by just putting together the string on its own, but that seems like an unnecessary workaround and wouldn't allow me to use .ajax() . I'd have to do a lot of work manually that this function should do for me.

The trouble is this part: format=application/json , because when I give that as a parameter in the settings object I pass to .ajax() , it escapes the slash to %2F , and the API doesn't accept the request. I've also tried just leaving out the format parameter, but I get a 500 server error. The request works perfectly if I just type it into my web browser, but not if this parameter is missing or doesn't include the slash (can't be escaped). I need to either prevent .ajax() from encoding the slash this way, or decode it again somehow BEFORE it reaches the API server.

I've already searched Google and StackOverflow for answers, but without any luck. I understand how to encode and decode escape characters, but I can't intercept it inside a jQuery function I didn't write. Unless I tried to rewrite that function, based on the jQuery source code, but again that seems like a big workaround for a simple issue. For reference, here is the relevant part of my code:

function getData(query, callback) {
    var settings = {
        url: state.apis.airNow.BASE_URL,
        dataType: 'json',
        type: 'GET',
        success: callback,
        data: {
            format: "application/json",
            zipCode: query,
            distance: 25,
            API_KEY: state.apis.airNow.API_KEY
        }
    };
    $.ajax(settings);
}

How do I get .ajax() to submit format=application/json in the exact form the API expects, or is there another similar function I should be using instead?

Thanks for your help!

Answer 1

Use processData:false and manually construct the query string. Worth noting that my makeQS function will not handle nested objects or arrays in its current state. The only options besides this is to pass the params on the url or to intercept the AJAX request and alter the URL

processData solution:

function makeQS(obj){
    var params = [];
    for(var key in obj){
        params.push(key + '=' + obj[key]);
    }
    return params.join('&');
}


function getData(query, callback) {
    var settings = {
        url: state.apis.airNow.BASE_URL,
        dataType: 'json',
        type: 'GET',
        success: callback,
        processData: false,
        data: makeQS({
            format: "application/json",
            zipCode: query,
            distance: 25,
            API_KEY: state.apis.airNow.API_KEY
        })
    };
    $.ajax(settings);
}

If you want to pass them on the URL instead you could just change settings.url to something like:

settings.url = state.apis.airNow.BASE_URL + '?' + makeQS({
            format: "application/json",
            zipCode: query,
            distance: 25,
            API_KEY: state.apis.airNow.API_KEY
        })

It's probably also worth noting that as no encoding at all is done on the parameters that characters like & and = within any of the parameters will very likely cause unexpected behavior from the API endpoint which is one of the reasons why an endpoint like this generally should take URI encoded GET parameters `