内容类型Ajax json丢失

Question

I wrote some php code that outputs some valid json, and sets the content-type header to application/json in my dev setup. However when I deploy this script to a embedded webserver it works fine except it's not capable of sending the content-type. It's not possible to run a other webserver.

Now I have the following code for Dynatable. Even though my dev and my embedded webserver, serve exactly the same file, and the only difference is the content-type. It works for my dev setup, however it doesn't work for my embedded setup.

I use the following code to load the json file to dynatable.

document.ready(
    $.ajax({
        url: 'phpApi.php',
        success: function(data){
            $('#myTable').dynatable({
                dataset: {
                    records: data
                }
            });
        }
    }));

So can someone explain me why the content-type is so important for ajax? How can I tell my code manually its json?

Answer 1

Without the content-type the returned data is assumed to be plain text. There is nothing in your code to tell it otherwise.

One way to get json would be to specify the return type in the jquery code. Just add dataType: 'json' into the ajax configuration.

Or you could use eval() to transform the returned text to json.

document.ready(
    $.ajax({
        url: 'phpApi.php',
        success: function(data){
            $('#myTable').dynatable({
                dataset: {
                    records: eval(data)
                }
            });
        }
    }));

Using JSON.stringify(eval(data)) might give you better results by making sure its json.

As pointed out below, JSON.parse(data) would probably be safer. (Eval is evil after all.)

Answer 2

So can someone explain me why the content-type is so important for ajax?

It's important so the client can identify what type of content the server returned, content-type: application/json tells jQUery to parse the data as an object. If no content type is returned, the client will assume the returned data is just plain text.

How can I tell my code manually its json?

Add dataType: "json" parameter to $.ajax()

document.ready(
    $.ajax({
        url: 'phpApi.php',
        dataType: "json",
        success: function(data){
            $('#myTable').dynatable({
                dataset: {
                    records: data
                }
            });
        }
    }));