WP Ajax coding Not Working

Ok so I am having trouble with converting my html design website to wp. I have everything working except for the ajax code that I am using to load the content into a specified div without reloading the page. This way my music player plays continuously without restarting the music player with every page load or link click. The code I was using for the html of my website worked perfectly exactly how i wanted it to. Please take a look at the page http://www.trillumonopoly.com/index2.html

but when I came here for help I was suggested to used some changes to make it work with wordpress…. I find that the content still doesnt load without reloading the entire page and then the music player starts from the beginning all over again. From a listener and consumer stand point this is annoying and I dont want to lose clients, or fans becuase of this issue so I have been waiting to launch my website untill this problem is fixed so maybe I can have someone assist me with this. please

Here is the Code I was told to put in my functions php

 /**
   * Init js script and its variables
   */
  add_action( 'wp_enqueue_scripts', 'init_js_vars' );
  function init_js_vars() {
    wp_enqueue_script( 'menu_nav', get_template_directory_uri().'/js/nav.js', array( 'jquery') );


    wp_localize_script( 'menu_nav', 'theme', array(
            'ajaxurl' => admin_url( 'admin-ajax.php' ),
            'nonce' => wp_create_nonce( 'ajax-get-page-content' ),
            'page' => 4
        ) );
    }

    /**
     * Handle ajax request, returns content of specific page
     */
    add_action( 'wp_ajax_get_page_content', 'get_page_content' );
    add_action( 'wp_ajax_nopriv_get_page_content', 'get_page_content' );
    function get_page_content() {
        check_ajax_referer( 'ajax-get-page-content', 'nonce' );

        $post_id = absint( $_POST['page_id'] );

        $post = get_post( $post_id );
        $content = apply_filters('the_content', $post->post_content); 

        wp_send_json_success( array( 'content' => $content ) );
    }

heres the JS/ajax code that I am using (Which still doesnt function correctly as in the link i provided)

$( document ).ready(function() {
  $.ajax({
    url: theme.ajaxurl,
    method: 'GET',
        data: {
        action: 'get_page_content',
        nonce: theme.nonce,
        page_id: 
    }
    success: function( response ) {
        $('#contentarea').html( response.content );
    }
  });
});

See the script live in action here http://wp.trillumonopoly.com
Please help me to figure this out to make it function like it does in my html version of the website from the first link I provided above. (few pages are missing but you can still get the just of what I am trying to do)