在WordPress插件中调用ajax之后的错误json响应

Question

I have a problem with an ajax call in my javascript in a wordpress plugin. In the response, I have all the script code before the json and I don't understand why.
This is my javascript code :

<script>
function upd_prod(selectedValue)
{
alert(selectedValue);
// var urlGetProd = '<?php echo $wp_root_path;?>';
var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
var fruit = 'Banana';

jQuery.ajax({
    //url: '/renewalxc/wp-content/plugins/update-product/getprod.php',
    url: ajaxurl,
    data: {
        'action':'example_ajax_request',
        'valprod' : selectedValue
    },

    success:function(data) {
        // This outputs the result of the ajax request
        console.log(data);
    },
    error: function(errorThrown){
        console.log(errorThrown);
    }
});
alert("Hello 2");
}
</script>

This is my function in function.php :

/**
 * HappenStance theme variables.
 *  
*/    
$happenstance_themename = "HappenStance";   //Theme Name
$happenstance_themever = "1.1.2";                   //Theme version
$happenstance_shortname = "happenstance";   //Shortname 
$happenstance_manualurl = get_template_directory_uri() .    '/docs/documentation.html'; //Manual Url
// Set path to HappenStance Framework and theme specific functions
$happenstance_be_path = get_template_directory() . '/functions/be/';                                        //BackEnd Path
$happenstance_fe_path = get_template_directory() . '/functions/fe/';                                        //FrontEnd Path 
$happenstance_be_pathimages = get_template_directory_uri() .     '/functions/be/images';        //BackEnd Path
$happenstance_fe_pathimages = get_template_directory_uri() . '';    //FrontEnd   Path
//Include Framework [BE]  
require_once ($happenstance_be_path . 'fw-options.php');         // Framework    Init  
// Include Theme specific functionality [FE] 
require_once ($happenstance_fe_path . 'headerdata.php');         // Include css     and js
require_once ($happenstance_fe_path . 'library.php');          // Include   library, functions
    function example_ajax_request() {

    // The $_REQUEST contains all the data sent via ajax
    if ( isset($_REQUEST) ) {

        global $wpdb;
        $id=$_REQUEST['valprod'];
        $req='SELECT ID,reference FROM wp_produits where ID='.$id.';';
        //'.$_REQUEST['pid'].'
        $row = $wpdb->get_row($req);
        $fruit = $_REQUEST['valprod'];

    /*
        $fruit = $_REQUEST['fruit'];

        // Let's take the data that was sent and do something with it
        if ( $fruit == 'Banana' ) {
            $fruit = 'Apple';
        }

        // Now we'll return it to the javascript function
        // Anything outputted will be returned in the response
        echo $fruit;

        // If you're debugging, it might be useful to see what was sent in the       $_REQUEST
        // print_r($_REQUEST);*/

        echo json_encode($row);
        //echo $fruit;

      }

// Always die in functions echoing ajax content
die();
}

add_action( 'wp_ajax_example_ajax_request', 'example_ajax_request' );

And this is the response :

<script>
function upd_prod(selectedValue)
 {
 alert(selectedValue);
// var urlGetProd = 'C:\Applications\wamp\wwwenewalxc\wp-    content\plugins\update-product\getprod.php';
 var ajaxurl = 'http://localhost/renewalxc/wp-admin/admin-ajax.php';
 var fruit = 'Banana';

jQuery.ajax({
    //url: '/renewalxc/wp-content/plugins/update-product/getprod.php',
    url: ajaxurl,
    data: {
        'action':'example_ajax_request',
        'valprod' : selectedValue
    },

    success:function(data) {
        // This outputs the result of the ajax request
        console.log(data);
    },
    error: function(errorThrown){
        console.log(errorThrown);
    }
    });
 alert("Hello 2");
 }
</script>

{"ID":"11","reference":"P11"} 

So why there is the code of the script before the response {"ID":"11","reference":"P11"} ??