Problem Setting Up AJAX Request in WordPress (with JQuery)

Solution:

This is working code for you you need to add this code in your child-theme functions.php I have made few changes to the code the way you wp_enqueue_scripts in wordpress.

child-theme (functions.php)

function my_custom_scripts() {

    $myvars = array( 
        'ajaxurl' => admin_url( 'admin-ajax.php' ) //admin ajax
    );
  
  wp_enqueue_script( 'my-ajax-request', get_stylesheet_directory_uri() . '/js/zip-search-popup.js', array( 'jquery' ),'',true );
    wp_localize_script( 'my-ajax-request', 'MyAjax', $myvars );

}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );

//hook zip-search function into ajax
add_action( 'wp_ajax_zip_search', 'zip_search' );
//same hook for users not logged in
add_action( 'wp_ajax_nopriv_zip_search', 'zip_search' );

//query for pulling in shipping data
function zip_search() {
  $submittedZip = $_REQUEST['submittedZip'];
  global $wpdb;

  //The SQL query
  $response  =  $wpdb-> get_results("SELECT {$wpdb->prefix}woocommerce_shipping_zones.zone_name ".
              "FROM {$wpdb->prefix}woocommerce_shipping_zone_locations ".
              "INNER JOIN {$wpdb->prefix}woocommerce_shipping_zones ".
              "ON {$wpdb->prefix}woocommerce_shipping_zone_locations.zone_id = {$wpdb->prefix}woocommerce_shipping_zones.zone_id ".
              "WHERE location_code = '$submittedZip' ");
  $response = array(
    'request' => $_REQUEST,
    'zip' => $submittedZip,
    'test' => 'is ok',
  );
  wp_send_json( $response );
}

child theme (js file – jQuery code) zip-search-popup.js

$(document).ready(function () {
    $('.zip-bar-button').click(function (event) {
        event.preventDefault();
        submittedZip = $("#zipcode-bar-input").val();
        console.log(submittedZip);
        $.ajax({
            url: MyAjax.ajaxurl,
            type: "POST",
            dataType: "json",
            data: {
                action: 'zip_search',
                submittedZip: submittedZip,
            },
            success: function (response) {
                console.log("this is the response: " + response);
                alert("working");
            },
        })
    })
})