Request.JSON

sending a JSON request to the jsFiddle backend. Later on parse and display the data.

by John-Philip Johansson

HTML

<div class='wrapper'>
    <p>JSON will be received in 1 second</p>
    <ul id='post'></ul>
</div>

CSS

body {
    font-family: Helvetica, Sans, Arial;
}
p, ul {
    padding: 10px;
}
ul {
    margin: 5px;
    border: 2px dashed #999;
}

JavaScript

/* var jsonData = JSON.encode({
            text: 'some text',
            array: [1, 2, 'three'],
            object: {
                par1: 'another text',
                par2: [3, 2, 'one'],
                par3: {}
            }
        });
*/
var jsonData = '{"text":"some text","array":[1,2,"three"],"object":{"par1":"another text","par2":[3,2,"one"],"par3":{}}}';

$.ajax({
    url: '/echo/json/',
    dataType: 'json',
    data: {
        json: jsonData,
        delay: 1
    },
    type: 'POST',
    success: function(data, textStatus, jqXHR) {
        show_response(data, $('#post'));
    }
});

show_response = function(obj, result) {
    $.each(obj, function(k, v) {
        result.append('<li>' + k + ': ' + v + '</li>');
    });
};