在视图中使用JSON数据

Question

I have a pretty complex PHP/HTML view. However, I recently changed my site to refresh automatically using AJAX. It currently returns a JSON array, and I need to reproduce my View using that data.

Here is my AJAX:

$(function() {
    $( "#selectable" ).selectable({
        selected: updatefilters,
    });   
    function updatefilters(ev, ui){
        // get the selected filters
        var $selected = $('#selectable').children('.ui-selected');
        // create a string that has each filter separated by a pipe ("|")
        var filters = $selected.map(function(){return this.id;}).get().join("\|");
        $.ajax({
            type: "POST",
            url: 'updatefilters',
            dataType: 'json', 
            data: { filters: filters },
            success: function(data){
                var html = "<div id ='board'><table>";
                for (i=0 ; i< data.length ; i++)
                {
                     html += "<tr><td>" + data[i].subject + "</td><td>" + data[i].body + "</td></tr>";
                }
                html += "</table></div>";
                $('#board').html(html);
            }
        });
    }
});

Here is my PHP file:

<div id='board'>
<?php
if ($threads)
    {
        $count = count($threads);
        $perpage = 17;
        $startlist = 3;
        $numpages = ceil($count / $perpage);
        if ($page == 'home') {$page = 1;}
        $threadstart = ($page * $perpage) - $perpage;
        $i = 0;
        echo "<table class='board'>
    <tr>
            <th width='5%'><img src='".base_url()."img/board/icons/category_icon.png' alt='category_icon'/></th>
            <th width='5%'>Tag</th>
            <th width='50%'>Subject</th>
            <th width='7.5%'>Author</th>
            <th width='7.5%'>Replies/Views</th> 
            <th width='15%'>Last Post</th>
    </tr>";
        foreach ($threads as $list) 
        {   $i++;
            $thread_owner = $this->thread_model->get_owner($list['owner_id']);
            $thread_id = $list['thread_id'];
            $query = $this->db->query("SELECT f.tag FROM filter_thread AS ft
                                        INNER JOIN filter AS f ON ft.filter_id = f.filter_id
                                        WHERE thread_id = $thread_id");
            $result = $query->result_array();
            $trunc_body = $this->thread_model->get_reply_summary($thread_id);
            $filter = "";
            $filter2 ="";
            $ent = "entertainment";
            foreach ($result as $string)
            {
                if ($string['tag'] == $ent) {
                    $filter2 .= "<div id='entertainment'><p>";
                    $filter2 .= "<img src='".base_url()."img/board/icons/entertainment_icon.png' title='Entertainment' alt='Entertainment'/>";
                    $filter2 .= "</p></div>";
                } else {
                $filter2 .= "<div id='misc'><p>";
                $filter2 .= "<img src='".base_url()."img/board/icons/misc_icon.png' title='Misc' alt='Misc'/>";
                $filter2 .= "</p></div>";
                $filter .= " [".$string['tag']."]";
                }
            }
            if (!$result) { $filter = "" AND $filter2 =""; }
            if ($i > $threadstart AND $i <= $threadstart + $perpage) 
            { 
                echo "<tr>";
                echo "<td>".$filter2."</td>";
                echo "<td>".$filter."</td>";
                echo "<td title='".$trunc_body['0']['body']."'><a href=".base_url()."main/thread/".$list['slug'].">".ucfirst($list['subject'])."<div id='filter'><p></p></div></a></td>"; 
                echo "<td><p>".$thread_owner."</p></td>";
                echo "<td align='right'>Replies: ".$list['replies_num']."<br>Views: ".$list['views']."</td>";
                $owner = $this->thread_model->get_owner($list['last_post_id']);
                echo "<td>".$owner." <br>".$list['replystamp'] ."</td></tr>";   
            }  
        }
        echo "</table>";
        echo "<br>";
        echo "Current Page: $page | ";    
        echo "Page: ";

        for ($n = 1; $n < $numpages+1; $n++) 
        {
            echo "<a href=".base_url()."main/home/$n>$n</a> | ";
        }
    }
?>
</div>

is there a not too hard way of accomplishing this?

Answer 1

Try adding header("Content-Type: text/plain"); at the TOP of your PHP file.

Also, move the <div id='board'> to a variable inside the script - AFTER the header() function.

Furthermore, change all echo's to variables, put those variables in an array, and use

json_encode($array);

Example:

$output = "<div id='board'>";

$output .= "<table class='board'>
    <tr>
            <th width='5%'><img src='".base_url()."img/board/icons/category_icon.png' alt='category_icon'/></th>
            <th width='5%'>Tag</th>
            <th width='50%'>Subject</th>
            <th width='7.5%'>Author</th>
            <th width='7.5%'>Replies/Views</th> 
            <th width='15%'>Last Post</th>
    </tr>";

echo json_encode( array('output'=>$output) );