jQuery JSON问题

Question

I compiled my data into JSON via php with 2 parameters response and status. Response has the data which PHP gets when AJAX is processed and status is the error code or success command.

Now, when I pass the data to jQuery, it comes up with weird back and forward slashes, although are don't appear if I console.log(data.response) on AJAX. Please help ..

IMAGE OF OUTPUT

THE JS:

jQuery(document).ready(function($) {
    $('.tax-filter').click( function(event) {

        // Prevent defualt action - opening tag page
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }

        // Get tag slug from title attirbute
        var selecetd_taxonomy = $(this).attr('title');

        $('.tagged-posts').fadeOut();

        data = {
            action: 'filter_posts',
            afp_nonce: afp_vars.afp_nonce,
            taxonomy: selecetd_taxonomy,
        };

        $.ajax({
            type: 'post',
            dataType: 'json',
            url: afp_vars.afp_ajax_url,
            data: data,
            success: function( data, textStatus, XMLHttpRequest ) {

                $('.tagged-posts').html( data.response );
                $('.tagged-posts').fadeIn();
                /*console.log( data );
                console.log( XMLHttpRequest );*/
            },
            error: function( MLHttpRequest, textStatus, errorThrown ) {
                /*console.log( MLHttpRequest );
                console.log( textStatus );
                console.log( errorThrown );*/
                $('.tagged-posts').html( 'No posts found' );
                $('.tagged-posts').fadeIn();
            }
        })

    });
});

THE PHP (WP)

// Script for getting posts
function ajax_filter_get_posts( $taxonomy ) {

  // Verify nonce
  if( !isset( $_POST['afp_nonce'] ) || !wp_verify_nonce( $_POST['afp_nonce'], 'afp_nonce' ) )
    die('Permission denied');

  $taxonomy = $_POST['taxonomy'];

    wp_reset_postdata();
    // WP Query
    $args = array(
      'post_type' => 'std9_photographs',
      'posts_per_page'  => -1,
      'tax_query' => array(
              array(
                'taxonomy' => 'std9_photograph_cat',
                'field'    => 'slug',
                'terms'    => $taxonomy,
              ),
            ),
      );

    // If taxonomy is not set, remove key from array and get all posts
    if( !$taxonomy ) {
      unset( $args['tag'] );
    }

    $query = new WP_Query( $args );

    $result = '';
    if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post();

      $result['response'][] = '<h2><a href="'.get_permalink().'">'. get_the_title().' </a></h2>';
      $result['status']     = 'success';

    endwhile; else:
      $result['response'] = '<h2>No posts found</h2>';
      $result['status']   = '404';
    endif;

    $result = json_encode($result);
    echo $result;

    die();
}

add_action('wp_ajax_filter_posts', 'ajax_filter_get_posts');
add_action('wp_ajax_nopriv_filter_posts', 'ajax_filter_get_posts');

Answer 1

JSON will add slashes when needed (so don't worry about that). The problem is that jQuery has problem to parse that data. You are probably facing a problem encoding your response.

Edit: In order to avoid your backslashes try encoding with the following command json_encode($str, JSON_UNESCAPED_SLASHES);

The reason that you are having this forward and back slashes is because you are adding in your response html code with </h2> </a> etc.