使用php响应来填充前端Ajax

Question

This should be a very easy question, but I cannot find the answer. I have a js file that is making an ajax request to a php file. i am then trying to use the response provided by php to update the front end, but the response is not in the correct format. I am getting back the whole echo statement when I look in the console. Pardon my ignorance here but I am quite new to php. I think there is an issue sending back an a href link and br in my php

$.ajax({
    url: 'php.php',
}, function (data) {
    console.log(data);
    $('.container').html(data);
});

PHP

<?php 
    $output = 'This is<br>a<br>test<br><a href="https://stackoverflow.com"><span>Test Here</span></a>';
    echo $output;
?>

When all this has successfully worked I want to change my html to:

<div class="container">
     This is<br>a<br>test<br><a href="https://stackoverflow.com"><span>Test Here</span></a>
</div>

Answer 1

When using jQuery's $.ajax function you can use either of { success: function() {...} } or .done() promise:

$.ajax({
    url: 'php.php',
    success:  function (data) {
        console.log(data);
        $('.container').html(data);
    }
});

Or

$.ajax({
    url: 'php.php',
    success:  function (data) {
        console.log(data);
        $('.container').html(data);
    }
}).done(function( data) {
    console.log(data);
    $('.container').html(data);
});