AndrewCarter

You should only respond with pure JSON (otherwise jQuery will get confused) and also tell jQuery to expect JSON back using the data type parameter of the ajax request function. $("#sub").click(function() { var name = $("#name").val(); var town = $("#town").val(); jQuery.ajax({ type: "POST", url: "postScripts/addDetail.php", data: { name: name, town: town }, dataType: 'json', success: function(data) { $('.modal-body').prepend('Returned: ' + data.name + ' and ' + data.town); $('.modal-body').prepend('Whole post: ' + data.whole_post); } }); }); $json = array(); $json['name'] = $_POST['name']; $json['town'] = $_POST['town']; $json['whole_post'] = var_export($_POST, true); echo json_encode($json);

Best thing is to convert the offending characters to HTML entities. Being inside 'pre' tags doesn't mean that the browser is no longer parsing your code as HTML, it has to look for the close tag after all! Try something like this: <pre><h1>Hello World</h1></pre> If you're using PHP, you can do something like this: echo '<pre>' . htmlentities('<h1>Hello World</h1>') . '</pre>';