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

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

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 = $('

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.

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.