Exercise (04)

Make an ajax call to a server script with the specified url. The script needs a parameter named "rating", holding a number from 1 to 5. When supplied with such a parameter, the server script should answer with a json object of the following form: {"average": 3.5, "count": 12} Display the received data inside the rating <div>!

HTML

<h3>Rating</h3>
<div id="rating">
</div>

CSS

h3 {
    margin: 8px 0;
    font-family: sans-serif;
    text-decoration: underline;
}

JavaScript

$(document).ready(function () {
    
    $('#rating').append('Please rate: ');
    for ( var i = 1; i <= 5; i++ ) {
        $('#rating').append('<a href="#">' + i + '</a> ');
    }
    
    $("a").click(clickHandler);    
    // .. some code here ..
                            
});

function clickHandler(event) {

    
    // .. possible code here ..
    var ratingString = {rating: $(event.target).html()};
    
    $.ajax({
        url: 'http://www.suppenzauber.com/rate/rate.php',
        data: ratingString,
        contentType: 'application/json',
        dataType: 'jsonp',
        success: function (data) {
            $("#rating").text(data.average);
        }
        // .. more options
    });
}