如何在自定义页面中使用ajax并在wordpress中发布

I have created a custom pages whit country and city dropdown. I want to use ajax to select city to according to the country selection. I tried to add ajax call directly in my page but it doesnt work

I dont know how to fix it.

Please help me, your help will appreciated heartly.

my link is as under my site

You need to use wp_ajax_(action) hook in order to use ajax in your pages.

<?php 

    add_action( 'wp_ajax_add_foobar', 'prefix_ajax_add_foobar' );
    add_action( 'wp_ajax_nopriv_add_foobar', 'prefix_ajax_add_foobar' );

    function prefix_ajax_add_foobar() {
        // Handle request then generate response using WP_Ajax_Response
    }
?>
<script>

    jQuery.post(
        '<?php echo admin_url('admin-ajax.php') ?>', 
        {
            'action': 'add_foobar',
            'data':   'foobarid'
        }, 
        function(response){
            alert('The server responded: ' + response);
        }
    );
    </script>