javascript - display html code of response returned by ajax, Jquery - Stack Overflow

admin管理员组

文章数量:1393938

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);
});

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);
});

• javascript
• jquery
• html

Share Improve this question Follow edited Jan 17, 2012 at 20:33 Prisoner ZERO 14.2k2121 gold badges100100 silver badges145145 bronze badges asked Jan 17, 2012 at 19:58 user1038814user1038814 9,6471818 gold badges6868 silver badges8888 bronze badges 2

• By html code do you mean you literally want the webpage to display <div></div> or would you rather it render the div? – Tomas Reimers Commented Jan 17, 2012 at 20:01
• 1 Look at this question. – PrimosK Commented Jan 17, 2012 at 20:03

Add a comment  | 

6 Answers 6

Sorted by: Reset to default 12

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);
});

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

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

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

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));
});

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.

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.

本文标签： javascriptdisplay html code of response returned by ajaxJQueryStack Overflow