Question

I have a HighCharts client whose responsibility is to load data from a webservice and show a chart. The function that requests data looks as below:

function requestData() {
    $.ajax({
        url:  'http://myhost.com/type?x=1&y=2&z=3',
        headers: { 
          Accept : "application/json"
        },
        type: "GET",
        dataType: "json",
        success: function(data) {
          //do something
        },
        cache: true
    });
}

(in the future, the url property will be dynamically generated)

The target webservice is read-only and implemented using Flask microframework: its purpose is to return JSON data to the HighCharts client. This is the Flask view (function) taking care of data requests:

@app.route('/<type>')
def get_data(type):

    x = request.args.get('x','')
    y = request.args.get('y','')
    z = request.args.get('z','')

    [...]

Problem: when I execute the javascript code in Chrome, the following HTTP request is sent to the webservice:

GET /type?x=1&y=2&z=3 HTTP/1.1  // '&' have been escaped to '&'
Host: myhost.com
Connection: keep-alive
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.64 Safari/537.11
Accept: application/json
Referer: http://myhost.com/chart.html
Accept-Encoding: gzip,deflate,sdch
Accept-Language: it-IT,it;q=0.8,en-US;q=0.6,en;q=0.4
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

…I get a 404 status code (Bad Request) from the server, which is perfectly good and expected whenever one or more of the request’s query parameters is null or malformed:

HTTP/1.0 400 BAD REQUEST
Content-Type: text/html; charset=utf-8
Content-Length: 16
Server: Werkzeug/0.8.3 Python/2.7.3
Date: Wed, 14 Nov 2012 10:23:49 GMT

After debugging on my Flask webservice I noticed that only the x query parameter (which please note is the first given in the HTTP request) is correctly parsed, while y and z are empy strings, which causes the 404.

Why is it happening? Any charset inconsistency regarding the & -> & escaping?

Thanks, any hint would be of real help (just ask if you need more specs or code)

Answer 1

I think the error is as you expected the escaped ampersand.

Try this:

function requestData() {
    $.ajax({
        url:  'http://myhost.com/type',
        headers: { 
          Accept : "application/json"
        },
        data: {
            x: 1,
            y: 2,
            z: 3
        },
        type: "GET",
        dataType: "json",
        success: function(data) {
          //do something
        },
        cache: true
    });
}