PHP AJAX call to MySQL database. How to properly escape HTML data returned (json_encode) to page?

Question

My database contains records with included HTML scripting tags. I have read many different options on how to handle this scenario while also using json_encode/AJAX.

Should I use a JS function to escape special characters client side or might there be a PHP solution I'm missing?

Edit Assumption: The user does not want to strip/remove the html tags, just wants a way or a suggestion in to encoding them either on the server or client side!

PHP (process.php):

 $records = array();

 if($results = $db->query("SELECT * FROM cust_tbl")) {
     if($results->num_rows) {
         while($row = $results->fetch_object()) {
             $records[] = $row;
         }

         echo json_encode($records);

         $results->free();
     }

 }

AJAX:

function show() {
    clear();
    $.ajax({
        type: "POST",
        dataType: "json",
        url: "process.php",
        data: "action=show",
        success: function(data) {
            $.each(data, function(index, data) {
                $('#tablebody').append('<tr>');
                $('#tablebody').append('<td>' + data.JL_JOB_DATE + '</td>');
                $('#tablebody').append('<td>' + data.JL_YR + '</td>');
                $('#tablebody').append('</tr>');
            });
        }
    });
}

Community · Accepted Answer · 2023-11-21 15:10:29Z

1

If you are looking to encode HTML to be sent: you can use htmlentities()

If you are looking to remove the html tags and just leave the text: use strip_tags()

UPDATE:

I noticed in your $.each you have 2 arguments you are using data for. In a $.each what i typically do is this:

$.each(data, function() {
    //use data.<column name>
});

Unless you really need the index of your data i suggest leaving it out for readability. Documentation on $.each can be found here.

Also, try doing your full append all at once.

$.each(data, function() {
    $('#tablebody').append( '' +
                            '<tr>' +
                                '<td>' + data.<column name> + '</td>' +
                                '<td>' + data.<column name> + '</td>' +
                            '</tr>' +
                            '');
});

Doing it your way basically creates a new row then adds table datas to the end of the table instead of specifically in the tr you want it in.

edited Nov 21, 2023 at 15:10

CommunityBot

11 silver badge

answered Apr 9, 2014 at 17:15

Mic1780

1,80410 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1040259 Over a year ago

Thanks. I don't want to strip the tags, I'm not sure how the best way to send and display encoded html tags.

Mic1780 Over a year ago

Are you wanting to encode it from Javascript -> PHP or PHP -> Javascript?

user1040259 Over a year ago

Not sure? What's the most logical way?

Mic1780 Over a year ago

Assuming you are retrieving the html from your database via PHP its pretty logical to encode it with PHP since it already has the data. Im not 100% on what you are asking for. Can you create a fiddle to simulate what exactly you want?

Arriane zafe · Accepted Answer · 2014-04-09 17:12:07Z

0

use php strip_tags($records);
http://www.w3schools.com/Php/func_string_strip_tags.asp

answered Apr 9, 2014 at 17:12

Arriane zafe

1436 bronze badges

3 Comments

user1040259 Over a year ago

Thanks. However, unless I'm missing something, this will not work (and also doesn't work, as I've tried.)

Arriane zafe Over a year ago

what do you mean this doesn't work? does html markup doesnt remove?

user1040259 Over a year ago

Correct, actually page breaks and no json is sent.

user1040259 · Accepted Answer · 2014-04-09 20:19:29Z

0

Use underscore.js

escape_.escape(string) 
Escapes a string for insertion into HTML, replacing &, <, >, ", and ' characters.

_.escape('Curly, Larry & Moe');
=> "Curly, Larry &amp; Moe"

Added function to my code:

$.each(data, function(index, data) {
            $('#tablebody').append('<tr>');
            $('#tablebody').append('<td>' + escape(data.JL_JOB_DATE) + '</td>');
            $('#tablebody').append('<td>' + escape(data.JL_YR) + '</td>');
            $('#tablebody').append('</tr>');
        });

edited Apr 9, 2014 at 20:19

answered Apr 9, 2014 at 17:55

user1040259

6,52913 gold badges47 silver badges62 bronze badges

2 Comments

Mic1780 Over a year ago

Glad you figured it out :)

user1040259 Over a year ago

Thanks for all your help! I made your jQuery suggestions to my code.

Collectives™ on Stack Overflow

PHP AJAX call to MySQL database. How to properly escape HTML data returned (json_encode) to page?

3 Answers 3

4 Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related