Best way to output HTML in Ajax reponse

twitter logo github logo ・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?

twitter logo DISCUSS (4)
markdown guide
 

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

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

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.

 

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')

}

});

});
 

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.

Classic DEV Post from May 18

Aim to Never Stop Learning

It's OK to not know everything. It's OK to be wrong.

Lars Wächter profile image
21 | Germany | Web Developer