Best way to output HTML in Ajax reponse
Lars Wächter

Lars Wächter @larswaechter

About: 25 | CS Student | Software Engineer

Location:
Germany
Joined:
May 30, 2017

Best way to output HTML in Ajax reponse

Publish Date: Jun 3 '17
21 4

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?

Comments 4 total

  • Ben Halpern
    Ben HalpernJun 4, 2017

    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.

  • Sergey Kislyakov
    Sergey KislyakovJun 4, 2017

    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.

  • Ricardo Rivera
    Ricardo RiveraJun 9, 2017

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

    $.get("test.php", function(data, status){
        var result = $('<h1></h1>').text(data);
        $("body").append(result);
    });
    
    Enter fullscreen mode Exit fullscreen mode
  • nihar
    niharJun 10, 2017

    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>
    
    Enter fullscreen mode Exit fullscreen mode

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

    }

    });

    });
Add comment