result of get_the_content() not correctly displaye

问题:

I have a javascript function that creates an array and fill it with the title and content of Wordpress posts. In other words, I try to put the result of get_the_content() and get_the_title() in a javascrip array using the loop, and display them in a separate div. The problem is that the result of get_the_content() dont appear in the div. not like with get_the_excerpt() or get_the_title() which both of them are correctly stored in javascript variable and correctly displayed in the div after onclick event.

The code:

<script type="text/javascript">

function initialize(str) {

<? echo 'var topics = [';?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>    

<?php $title=get_the_title();?>

<?php 
echo "['";
echo $title;
echo "',";
$content=get_the_content();
echo $content;
echo "],";  ?>

<?php endwhile; ?>
<?php endif; ?>

<?php echo '];'; ?>  

for (i = 0; i < topics.length; i++) 
{ 
if(topics[i][0]==str) {
document.getElementById("id").innerHTML = locationsmee[i][1];   
            }

}

Thanks in advance

回答1:

You're correctly adding quotes for the title, but not for the content. You're almost certainly getting JavaScript errors when you try the results.

You should probably also make sure that the content strings don't contain quotes, because that would also cause errors (and would constitute a possible XSS vector, depending on where the content comes from). The simplest way to do that is to use a JSON encoding facility.

回答2:

I have found the full solution based on Pointy answer. to encode wordpress posts data into JSON, it can be done via one of the two codes:

<?php
header('Content-Type: text/html; charset: UTF-8');
require( '../English/The-Blog/wp-load.php' );

query_posts(array('posts_per_page' => 20,));

$jsonpost = array();
$i=0;
if (have_posts()) :
while (have_posts()) : the_post(); 


  $jsonpost[$i]["id"] = get_the_ID();
  $jsonpost[$i]["title"] = get_the_title();
  $jsonpost[$i]["url"] = apply_filters('the_permalink', get_permalink());
  $jsonpost[$i]["content"] = apply_filters('the_content', get_the_content());


  $jsonpost[$i]["date"] = get_the_time('d F Y');
  $i=$i+1;
endwhile;
endif;

header('Content-type: application/json;');
echo json_encode($jsonpost);
?>

OR

<?php


define('WP_USE_THEMES', false);
require('../English/The-Blog/wp-blog-header.php');

$posts = get_posts(array(
        'numberposts' => 5,
        'offset' => 0,
        'orderby' => 'post_date',
        'order' => 'DESC',
        'post_type' => 'post',
        'post_status' => 'publish'
        ));
$json = array();


if ($posts) {
    foreach ($posts as $post) {
        $ray = array();
        the_post();
        $ray['id'] = $post->ID;
        $ray['date'] = $post->post_date;
        $ray['contents'] = $post->post_content;
        $ray['title'] = $post->post_title;
        $json['posts'][] = $ray;

    }
}
header('Content-type: application/json;');
echo json_encode($json);
?>

Both of the codes give a JSON string which can be accessed/dispalyed via jQuery like this:

<script>
jQuery(document).ready(function($){
    $(".load").click(function(){

        $.getJSON(
            'phpscript.php',
            function(data){
                      $('#9lessonsLinks').hide();
                     for (var i=0 ; i < data.length ; i++)
            {
                    var personne = data[i];

         var div_data ="<div class='box'><a>"+personne.url+"</a></div>";

        $(div_data).appendTo("#9lessonsLinks");


                          }



            $('#9lessonsLinks').fadeIn();

            }
        );
    });
});

</script>