jQuery AJAX请求从PHP返回NULL

Question

Here is the code I am working on for my Wordpress site:

jQuery:

jQuery(document).ready(function($)
{
    var actionValue;

    $(".tabRow li").on('click', function(event)
    {
            event.preventDefault(); //override default behaviour

            var clicked = $(this); //caches click so we don't scan DOM again

            if(clicked.attr('id')=="tabAddData") //tab1 clicked
            {
                    actionValue = "tab1Clicked";
            }

            $("li").removeClass("selected");
            clicked.addClass("selected");

            alert ('starting ajax call');
            $.ajax(
                    ajaxObject.ajaxurl, //request gets sent to this url
                    { //start of [options]
                            type: 'POST',

                            dataType: 'json', //type of data expected back from server

                            //data to send to server (JSON format)
                            data:
                            {
                                    action: 'ajaxAction',
                                    nonce: ajaxObject.nonce,
                                    actionName: actionValue
                            }
                    } //end of [options]
            ) //end ajax(), the other fuctions are chained to it (.done .fail .always)

            .done (function(data)
            {
                    alert ('success function');
                    if(actionValue == "tab1Clicked") //tab1 clicked
                    {
                            $('#dataSection').empty();
                            $('#dataSection').append(data);
                    }
            }) //end of done (success) function

            .fail (function(xhr, desc, err)
            {
                    alert ('error function');
                    console.log(xhr);
                    console.log("Details: " + desc + "\nError:" + err);
            }) //end of fail (error) function
    }); //end of onclick
});

PHP:

<?php
$my_action='ajaxAction';

if(defined('DOING_AJAX') && DOING_AJAX)//check if AJAX is loaded and working
{
    //for logged in users
    add_action('wp_ajax_'.$my_action, 'ajaxResponse');
}

function ajaxResponse()
{
    if(wp_verify_nonce($_POST['nonce'], 'ajaxAction'))
    {
            if($_POST['actionName'] == "tab1Clicked")
            {
                    $addDataSection = getAddDataSection();
                    $response=array(
                            'status' => 'success',
                            'addDataSection' => $addDataSection
                    );
                    header('Content-type:application/json;charset=utf-8');
                    echo json_encode($response);//encodes the jQuery array into json format
                    die;
            }
    }
}

function getAddDataSection()
{   
    //lots of echo statements which builds the html code
}
?>

When I first load my page, my PHP function getAddDataSection() generates the HTML inside my <div id='dataSection> . This works fine.

When I click on tab1, my jQuery AJAX call is supposed to reuse the same PHP function to generate my HTML. This is not working fine.

After I click on tab1, the jQuery fail function is triggered.

When I check Firebug, the response data contains the html generated by my PHP function getDataSection() , followed by a JSON string

{"status":"success","addDataSection":null}

When replying, keep in mind I'm a newbie. Thanks :)

Updated to include Console error:

Details: parsererror
Error:SyntaxError: JSON.parse: unexpected character at line 2 column 1 of the JSON data

Answer 1

I think I found a solution.

In my jQuery, I changed the dataType from json to html.

Then in my PHP, I changed this:

            if($_POST['actionName'] == "tab1Clicked")
            {
                    $addDataSection = getAddDataSection();
                    $response=array(
                            'status' => 'success',
                            'addDataSection' => $addDataSection
                    );
                    header('Content-type:application/json;charset=utf-8');//still works without this line
                    echo json_encode($response);//encodes the jQuery array into json format
                    die;
            }

to this:

            if($_POST['actionName'] == "tab1Clicked")
            {
                    $addDataSection = getAddDataSection();
                    echo $addDataSection;
                    die;
            }