DEV Community

loading...

Best way to output HTML in Ajax reponse

larswaechter profile image Lars Wächter ・1 min read

Scenario:

You send an Ajax get request to your server and you expect to print something in html.

Where do you add your HTML code to your result?

Serverside, where you print your result with all of your HTML code on your server (Here PHP)?
PHP

And simply add the Ajax result to the body afterwards:
Javascript1

Or Clientside, where you add the HTML part to your Ajax result, that does contain the plain result in JS?
Javascript2

So, which way do you prefer or is the better one?

Discussion (4)

pic
Editor guide
Collapse
likebrain profile image
Ricardo Rivera • Edited

Encode Result for sanitize your output.. (xss, utf...)

$.get("test.php", function(data, status){
    var result = $('<h1></h1>').text(data);
    $("body").append(result);
});
Collapse
ben profile image
Ben Halpern

I could see a reason for sending over the markup, but in general, I'd send over the data and let the view handle the logic. These days, if you are using a client-side framework, it has a lot of opinions on the matter, and you are generally trying to simply pass data.

Collapse
niharmore33 profile image
nihar • Edited

Q.I am trying to update a div with the content from an ajax html response. I beleive I have the syntax correct, however the div content gets replaced with the entire HTML page response, instead of just the div selected in the html response. What am I doing wrong?

<script>
    $('#submitform').click(function() {
        $.ajax({
        url: "getinfo.asp",
        data: {
            txtsearch: $('#appendedInputButton').val()
        },
        type: "GET",
        dataType : "html",
        success: function( data ) {
            $('#showresults').replaceWith($('#showresults').html(data));
        },
        error: function( xhr, status ) {
        alert( "Sorry, there was a problem!" );
        },
        complete: function( xhr, status ) {
            //$('#showresults').slideDown('slow')
        }
        });
    });
</script>

Youcan learn HTML here: hackr.io/tutorials/learn-html-5

A.You are setting the html of #showresults of whatever data is, and then replacing it with itself, which doesn't make much sense ?
I'm guessing you where really trying to find #showresults in the returned data, and then update the #showresults element in the DOM with the html from the one from the ajax call :

$('#submitform').click(function () {

$.ajax({

url: "getinfo.asp",

data: {

txtsearch: $('#appendedInputButton').val()

},

type: "GET",

dataType: "html",

success: function (data) {

var result = $('

').append(data).find('#showresults').html();

$('#showresults').html(result);

},

error: function (xhr, status) {

alert("Sorry, there was a problem!");

},

complete: function (xhr, status) {

//$('#showresults').slideDown('slow')

}

});

});
Collapse
defman profile image
Sergey Kislyakov 🇷🇺 🇺🇸 • Edited

Just send the data so if you're going to make something else for your app (a mobile client for example), you won't have to strip out the html or create a new API endpoint.