How to dynamical change the html using jquery get method in ajax

Question

Below is the code snippet. I have used to fetch some attributes from html and passing it to sever using AJAX. On sucess of the AJAX I need to return some content on Html Page.

var hotel=$( "#listHotel option:selected" ).val();      
$.ajax({
            url: "/getHotels",
            contentType: "application/xml; charset=utf-8",
            data: {'hotel':hotel},          
            type: "GET",
            success: function(response){                
                var r= JSON.parse(response);                
                var rating =r.message   
                alert(rating);          
                $("#rate").html("Ratings : "+rating);
                $("#rate").show('slow');                
                console.log(rating);
            },
            error: function(error){
                alert(response);
                console.log(error);
              }
          });

is it possible to dynamically change the HTML using jquery get method. Because the below scripts are not working

$("#rate").html("Ratings : "+rating);
$("#rate").show('slow');           

Answer 1

try defining the dataType of your ajax call as json:

var hotel=$( "#listHotel option:selected" ).val();      
$.ajax({
            url: "/getHotels",
            contentType: "application/xml; charset=utf-8",
            data: {'hotel':hotel},
            type: "GET",
            dataType: "json",
            success: function(response){                
                var r= response;
                var rating =r.message   
                alert(rating);          
                $("#rate").html("Ratings : "+rating);
                $("#rate").show('slow');                
                console.log(rating);
            },
            error: function(error){
                alert(response);
                console.log(error);
              }
          });