Why is wordpress + ajax + $wpdb->get_results not working?

Question

AJAX

It is required to write a calculator plugin for calculating the cost of goods. A special case because ready-made solutions did not fit.

I connect the necessary scripts and styles in the function.php of my plugin

add_action( 'wp_enqueue_scripts', 'dealer_custom_calc_scripts' );
function dealer_custom_calc_scripts(){
    wp_enqueue_style( 'calculator_styles', plugins_url() . '/dealer-custom-calculator/assets/css/calculator.css');
    wp_enqueue_style( 'calculator_new_styles', plugins_url() . '/dealer-custom-calculator/assets/css/calculator_new.css');
  wp_enqueue_script( 'rulon_script', plugins_url() . '/dealer-custom-calculator/assets/js/all_script.js', array(), '1.0.0', true );
}

//Я не подключаю тут jQuery.ajax так как они подключаются и без меня и нормально работают.
//Создаю вывод формы для будущего калькулятора
function get_dealer_calc($calc_type){
  $html='
  <div class="calculator">
  <div class="cal-container">
  <div class="sizes row">
    <div class="column small-6">
      <label for="width"><div class="field-name">Ширина (см)</div></label>
      <div class="field-box"><input type="number" id="width" min="10"></div>
    </div>
    <div class="column small-6">
      <label for="height"><div class="field-name">Высота (см)</div></label>
      <div class="field-box"><input type="number" id="height" min="10"></div>
    </div>
  </div>
  <div class="row" id="material" >
    <div class="res-box column small-9">
      //Сдесь после ввода пользователем ширины и высоты изделия должны появиться варианты используемых материалов. Должны подтегиваться через jQuery.ajax 
    </div>
  </div>
  <div class="row" id="sistems" >
    <div class="res-box column small-9">
      //Сдесь после материала изделия должны появиться варианты используемых систем. Должны подтегиваться через jQuery.ajax 
    </div>
  </div>
    <div class="row" id="price" >
    <div class="res-box column small-9">
      //ну а здесь соответственно выводится полченная стоимость
    </div>
  </div>
  </div>
  </div>
  ';
  return $html;
}

add_shortcode('dealer-calc', 'get_dealer_calc'); //[dealer-calc calc_type="rulon-classic|rulon-zebra..."]

In all_script.js I write such a simple code

var width = document.getElementById('width');
var height = document.getElementById('height');
var material = document.getElementById('material');

width.oninput = function() {
    if (height.value.length && height.value  >= 10 && width.value >= 10){
      //console.log(width.value + " " + height.value);
      //вызвать функцию отправки длинны и ширины в PHP
      send(width, height);
    }
    
  };
  
height.oninput = function() {
    if (width.value.length && height.value  >=  10 && width.value >= 10){
      //console.log(width.value + " " + height.value);
      //вызвать функцию отправки длинны и ширины в PHP
      send(width, height);
    }
    
  };

function funcBefore(){}

function funcSuccess(data){
  //console.log(data);
  material.innerHTML = data;
}
  
function send(width, height) {
    //console.log(width.value + " " + height.value);
      // отправка длинны и ширины в PHP
    //$.post("/wp-content/plugins/dealer-custom-calculator/includes/calc.php",{width: width.value, height: height.value}, )
    jQuery.ajax({
     url: "http://my-tests3.pp.ua/wp-content/plugins/dealer-custom-calculator/includes/calc.php",
     type: "POST",
     data: ({width: width.value, height: height.value}),
     dataType: "html",
     beforeSend: funcBefore,
     success: funcSuccess
    });
}

Well, in calc.php it's even easier

<?php
if ($_POST['width'] && $_POST['height']){
  //$html= 'Данные ширина ='.$_POST['width'].' и  высота = '.$_POST['height'].' успешно приняты бекэндом';
  //найдема материалы удовлетворяющие условию
  global $wpdb;
  $fivesdrafts = $wpdb->get_results( "SELECT * FROM `wp_posts` WHERE `ID` = '31706'" );

    foreach ( $fivesdrafts as $fivesdraft ) {
      $html = "<p>".$fivesdraft->post_title."</p>";
    }
  
  echo $html; // так я тестирую адекватность работы с БД ибо точно знаю что запрос не возвращает пустую строку, если переношу все это обращение к БД в function.php моего плагина то все отрабатыват отлично и выводит правильный результат
}

?>

While calc.php is

<?php
if ($_POST['width'] && $_POST['height']){
  $html= 'Данные ширина ='.$_POST['width'].' и  высота = '.$_POST['height'].' успешно приняты бекэндом';
  echo $html;
}
?>

Everything goes fine, and I get what I was supposed to get, but as soon as I try to connect to the database, I immediately get the error
": Uncaught Error: Call to a member function get_results() on null in /home/charodey/my- tests3.pp.ua/www/wp-content/plugins/dealer-custom-calculator/includes/calc.php"
If I understand the meaning of the error correctly, then "global $wpdb;" doesn't work because jQuery.ajax directly sends a request to the "calc.php" file, bypassing the entire wordpress with all its global variables.
The QUESTION is simple - what should I do to use all the features of wordpress in my calc.php?

Answer 1

Because you send a request for a file /includes/calc.php, and he does not know that you are working with WordPress. You need to connect the wp-load.php file from the site root to load the core, like this: require_once '../../../wp-load.php';
But in general, ajax on WP is done a little differently. See description: https://wp-kama.ru/id_2018/ajax-v-wordpress.html