通过Wordpress中的jquery调用运行php文件

So I wish to replicate the following functionality in wordpress. Jquery calls a php file, which itself queries a mysql table, and returns the result encapsulated within an tag. How do I go about achieving this?:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    ....

    function initialize() {
        ....
        feedData();
    }

    $(document).ready(function () { initialize(); });

    function feedData() {
        $(document).ready(function () {
            $.ajax({
                cache: false,
                type: "POST",
                async: false,
                url: "page-gotw-search.php",
                data:{"action=showcountries"},
                success: function (data) {
                    $('#CountryList').append(data);
                },
                error: function (data, status, error) {
                    console.log(data);
                    console.log(status);
                    console.log(error);
                }
            });
        });
    }
</script>
<body>
<div style="width: 800px">
    <div style="float: left">
        <select id="CountryList" onchange="getRegion()" size="20"></select>
        <select id="RegionList" size="20" onchange="getMap()"></select>
    </div>
    <div id="cityList" style="float: right"></div>
</div>
</body>
</html>

page-gotw-search.php

<?php

  include_once("pdo_mysql.php");

  pdo_connect("localhost","root","");
  pdo_select_db("wpdb");


  $action=$_POST["action"];

  if($action=="showcountries"){
     $showcountry = pdo_query("Select distinct meta_value from wp_usermeta where meta_key =?, pdo_real_escape_string('country_registration')");

     if (!$showcountry) {
         $message  = 'Invalid query: ' . pdo_error() . "
";
         $message .= 'Whole query: ' . $showcountry;
         die($message);
     }else{
         foreach($showcountry as $row){
            echo '<option value=".$row[country_code].">.$row[country_name].</option>';
         }
     }
  }
  else if($action=="showregions"){
      $country_id= $_POST["country_id"];

      $showregion = pdo_query("Select region_code, region_name from regiontbl
                WHERE country_id=?", pdo_real_escape_string($country_id));

      if (!$showregion) {
          $message  = 'Invalid query: ' . pdo_error() . "
";
          $message .= 'Whole query: ' . $regionquery;
          die($message);
      }else{
         foreach($showregion as $row){
            echo '<option value=".$row[region_code].">.$row[region_name].</option>';
         }
      }
  }
?>

</div>

Looks like you want to implement ajax into the wordpress.

I have a simple way to do this. Follow below given steps to use ajax calls in wordpress

add some code in footer.php

jQuery(‘#clickerid').change(function(){
var your_id = jQuery(‘#get_val').val();
var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
jQuery.ajax({
               cache: false,
               type: 'POST',
               url: '<?php echo admin_url('admin-ajax.php'); ?>',
               data: ‘id='+ id + '&action=get_id',
               success: function(data) 
               {   
                jQuery(‘#id').html(data);

               }
           });
       });

Then use this ajax call into the functions.php

add_action( 'wp_ajax_get_your_action', 'prefix_ajax_get_your_action' );
add_action( 'wp_ajax_nopriv_get_your_action', 'prefix_ajax_get_your_action' );

function prefix_ajax_get_costofcare() {
    // Do your php code used in ajax call and return it.
}

Ajax calls works via admin-ajax.php which is build in functionality provided by wordpress