Question

Trying to output html php through JSON for an ajax website.

php:

$return = "<div id='content'><ul class='allitems'>";
while($row = mysql_fetch_array($result)){
    $return .= "<li class='items'>" . "<div class='itemheading'><div  class='controls'> <span class='votes'>" . $row['votes'] . "</span>";
    $return .= "<form class='actions' action='index.php' method='POST'><input type='hidden' name='id' value='{$row['id']}'/><input type='submit' class='button plus' value='+1' /></form>";
    $return .= "<form class='actions' action='index.php' method='POST'><input type='hidden' name='id-' value='{$row['id']}'/><input type='submit' class='button minus' value='-1' /></form>  ";
    $return .= "<form class='actions' action='index.php' method='POST'><input type='hidden' name='idDel' value='{$row['id']}'/><input type='submit' class='button delete' value='X' /></form>  ";
    $return .= "</div><span class='title'>" . $row['name'] . "</span></div><span class='infotext'>". $row['infotext'] ."</span></li>";
}
$return .= "</ul></div>";
echo json_encode($return);

The output if you go to this php page has slashes (\/) all over the place eg. <\/span><\/form> <\/div>Make the app look all nice<\/span>and doesnt output as regular html.

this is the code for the ajaxpage that willshow the putput:

    <script id="source" language="javascript" type="text/javascript">

  $(function () {
    $.ajax({url: 'retrieve.php', dataType: 'json'}).done(function(data) {


            var html = data[3];

            $('#output')
                .append("<b>id: </b>"+html)


    });
});
  </script>

problem with this is that it outputs < when var html = rows[0]; d when [1] ect. only showing 1 character at a time.

How do I see all the html in one go and as actual html code?

Answer 1

JSON returns things in an array like manner (im new too it as well so im not exactly sure) so youhave to make all that html one object in the array. Below I have set it to be referened using ‘html’ in an associative array.

on the php page change this echo json_encode($return); to this
echo json_encode(array('html' => $return));

On the ajax page you will need to change it only a little.

replace:

var html = data[3];

                $('#output')
                    .append("<b>id: </b>"+html)

with:

var html = data['html'];

            $('#content')
                .append(html)

or to make it neater you dont even have to make a variable for html you can just get it straight from the JSON array:

        $('#content')
            .append(data['html'])