display html code of response returned by ajax, Jq

问题:

I have a jquery AJAX function which retrieves some HTML markup and displays it on the page. I would also like to display the html code of this HTML returned. I've looked around for a solution but not finding any. Can someone please help. Many thanks

$.post('get_news.php', $("#gifForm").serialize(), function(data) {
     //Show HTML
     $('#output').html(data);

     //Show HTML code
     $('#output_code').html(data);
});

回答1:

try using the text() function. This will escape and display html code. http://api.jquery.com/text/

$.post('get_news.php', $("#gifForm").serialize(), function(data) {
  //Show HTML
  $('#output').html(data);
  //Show HTML code
  $('#output_code').text(data);
});

回答2:

You can surround your html with "code" and it should display it as is without rendering the html:

$('#output_code').html("<code>" + data + "</code>");

回答3:

Put the output in a textarea. It will maintain the formatting. (if the HTML contains a textarea, you'll have to escape it first).

回答4:

You can try to use escape on the HTML data. Try this

$.post('get_news.php', $("#gifForm").serialize(), function(data) {
    //Show HTML
    $('#output').html(data);
    //Show HTML code
    $('#output_code').html(escape(data));
});

回答5:

The code returned and displayed by the AJAX is anything created and output by the PHP script you are calling. All of the code should be present so you may need to adjust the output of the PHP to include the elements you want.

What does the PHP page do? database work? query and display results? what you should see in the AJAX results is the same thing you would get if you tried the php script on its own.

回答6:

From your code it looks like this is sent back from a PHP file, if so you could just use one of PHP's htmlentities functions to convert the result before sending it back to the Ajax function, and it will display just fine, preferrably in a html pre tag.

You should also use jQuery text() and not html().

If you would like syntax highlighting, line numbers and lots of other stuff, GeSHi and Syntax Highlighter is used by a lot of sites to display code snippets.