AJAX запрос примеры, — на чистом Javascript, так же AJAX запрос jquery, Fetch запрос, всё это в разных вариантах, GET POST JSON

// Данные для передачи на сервер допустим id товаров и его количество
let id_product = 321;
let qty_product = 2;
 
// Создаём объект класса XMLHttpRequest
const request = new XMLHttpRequest();
 
/*  Составляем строку запроса и кладем данные, строка состоит из: 
пути до файла обработчика ? имя в GET запросе где будет лежать значение запроса id_product и 
через & мы передаем количество qty_product. */ 
const url = "ajax_quest.php?id_product=" + id_product + "&qty_product=" + qty_product;

/* Здесь мы указываем параметры соединения с сервером, т.е. мы указываем метод соединения GET, 
а после запятой мы указываем путь к файлу на сервере который будет обрабатывать наш запрос. */ 
request.open('GET', url);

// Указываем заголовки для сервера, говорим что тип данных, - контент который мы хотим получить должен быть не закодирован. 
request.setRequestHeader('Content-Type', 'application/x-www-form-url');
 
// Здесь мы получаем ответ от сервера на запрос, лучше сказать ждем ответ от сервера 
request.addEventListener("readystatechange", () => {
	
 /*   request.readyState - возвращает текущее состояние объекта XHR(XMLHttpRequest) объекта, 
 бывает 4 состояния 4-е состояние запроса - операция полностью завершена, пришел ответ от сервера, 
 вот то что нам нужно request.status это статус ответа, 
 нам нужен код 200 это нормальный ответ сервера, 401 файл не найден, 500 сервер дал ошибку и прочее...   */
	if (request.readyState === 4 && request.status === 200) {
	
      // выводим в консоль то что ответил сервер
	  console.log( request.responseText );
    }
});
 
// Выполняем запрос 
request.send();

let	id_product = 321;
let qty_product = 2;

// Создаем экземпляр класса XMLHttpRequest
const request = new XMLHttpRequest();

// Указываем путь до файла на сервере, который будет обрабатывать наш запрос 
const url = "ajax_quest.php";
 
// Так же как и в GET составляем строку с данными, но уже без пути к файлу 
const params = "id_product=" + id_product+ "&qty_product=" + qty_product;
 
/* Указываем что соединение	у нас будет POST, говорим что путь к файлу в переменной url, и что запрос у нас
асинхронный, по умолчанию так и есть не стоит его указывать, еще есть 4-й параметр пароль авторизации, но этот
	параметр тоже необязателен.*/ 
request.open("POST", url, true);
 
//В заголовке говорим что тип передаваемых данных закодирован. 
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 
request.addEventListener("readystatechange", () => {

    if(request.readyState === 4 && request.status === 200) {       
		console.log(request.responseText);
    }
});
 
//	Вот здесь мы и передаем строку с данными, которую формировали выше. И собственно выполняем запрос. 
request.send(params);

//	Данные для передачи на сервер например	id товаров и его количество
let id_product = 321;
let qty_product = 2;
 
 // принцип	тот же самый что и у обычного POST	запроса 
const request = new XMLHttpRequest();
const url = "ajax_quest.php";
const params = "id_product=" + id_product+ "&qty_product=" + qty_product;
 
//	Здесь нужно указать в каком формате мы будем принимать данные вот и все	отличие 
request.responseType =	"json";
request.open("POST", url, true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 
request.addEventListener("readystatechange", () => {
 
    if (request.readyState === 4 && request.status === 200) {
        let obj = request.response;
       
	console.log(obj);       
	// Здесь мы можем обращаться к свойству объекта и получать	его значение
	console.log(obj.id_product);
	console.log(obj.qty_product);   
	}
});
 
request.send(params);

$(document).ready(function()
{
    let id_product = 321;
    let qty_product = 2;
 
    $.ajax({ 
 
      url: "ajax_quest.php", 
    // dataType: "json", // Для использования JSON формата получаемых данных
       	method: "GET", // Что бы воспользоваться POST методом, меняем данную строку на POST   
    	data: {"id_product": id_product,"qty_product": qty_product},
       	success: function(data) {
			
 		console.log(data); // Возвращаемые данные выводим в консоль
       } 
 });
}); 

let id_product = 321;
let qty_product = 2; 
 
// Первым аргументом кладем путь, + строку как и в любом другом запросе, ключ=значение&ключ=значение 
fetch("ajax_quest.php"+ "?" + "id_product=" + id_product + "&qty_product=" + qty_product,
 
// Второй аргумент это объект с указаниями, методаи заголовка 
    { 
	method: "GET", 
	headers:{"content-type":"application/x-www-form-urlencoded"} 
	})
   
.then( response => {
	if (response.status !== 200) {
		
        return Promise.reject(); 
  }
    return response.text()
})
.then(i => console.log(i))
.catch(() => console.log('ошибка'));  

let id_product = 321;
let qty_product = 2; 
// Вынес что бы облегчить чтение так же можно вынести и headers
let data_body = "id_product=" + id_product + "&qty_product="+ qty_product;  
 
/*
Первым аргументом кладем путь до файла
на сервере, вторым объект где будут
свойства method, body здесь у нас данные для
передачи на сервер, headers заголовок.
*/
fetch("ajax_quest.php", { 
	method: "POST",
    body: data_body,   
	headers:{"content-type": "application/x-www-form-urlencoded"} 
	})
   
.then( (response) => {
        if (response.status !== 200) {           
			return Promise.reject();
        }   
return response.text()
})
.then(i => console.log(i))
.catch(() => console.log('ошибка')); 

        /*** Fetch JSON GET ***/
/*
        let id_product = 321;
        let qty_product = 2;

fetch("ajax_quest.php?id_product=" + id_product + "&qty_product=" + qty_product, {
	headers: {"Content-type": "application/json"}
})
	.then(response => {
	if (response.status !== 200) {
		return Promise.reject();
	}
	return response.json();
})
	.then(i => console.log(i))
	.catch(() => console.log('ошибка'));*/

        /*** FETCH + JSON  + POST ***/
        /*let id_product = 321;
         let qty_product = 2;
         let data = {
         "id_product": id_product,
         "qty_product": qty_product
         };

         data = JSON.stringify(data);

         fetch("ajax_quest.php", {
         method: "POST",
         body: data,
         headers: {"Content-type": "application/json"}
         })
         .then(response => {
         if (response.status !== 200) {
         return Promise.reject();
         }
         return response.json();
         })
         .then(i => console.log(i))
         .catch(() => console.log('ошибка'));*/
        /************************************************************/
        let id_product = 321;
        let qty_product = 2;

        let upload = {
            "id_product": id_product,
            "qty_product": qty_product
        };
        let data = new FormData();
        data.append("json", JSON.stringify(upload));

        fetch("ajax_quest.php",
            {
                method: "POST",
                body: data
            })
            .then(response => {
                if (response.status !== 200) {
                    return Promise.reject();
                }
                return response.json();
            })
            .then(function (data) {
                console.log(JSON.stringify(data))
            })
            .catch(() => console.log('ошибка'));

fetch('https://raw.githubusercontent.com/belocer/belocer.github.io/blob/master/js/app.js')
         .then(response => {
         	if (response.status >= 400) {
         	return Promise.reject();
         }
         	return response.json();
         })
         .then(i => console.log(i))
         .catch(() => console.log('ошибка'))

<form method="post" enctype="multipart/form-data" action="#" class="feedback__form" id="form_write_us">

	<label class="feedback__label" for="name"><span class="feedback__label-span">Ваше имя</span>
		<input class="feedback__input" type="text" name="name" id="name"></label>

	<label class="feedback__label"><span class="feedback__label-span">Организация</span>
		<input class="feedback__input" type="text" name="company" id="company"></label>

	<label class="feedback__label"><span class="feedback__label-span">Телефон</span>
		<input class="feedback__input" type="tel" name="phone" id="phone"></label>

	<label class="feedback__label" for="time-call"><span class="feedback__label-span">Удобное время для звонка (Мск)</span>
		<input class="feedback__input" type="text" name="time-call" id="time-call"></label>

	<label class="feedback__label" for="email"><span class="feedback__label-span">Ваш e-mail</span>
		<input class="feedback__input" type="email" name="email" id="email"></label>

	<label class="feedback__label"><span class="feedback__label-span">Ваше сообщение</span>
		<input class="feedback__input" type="text" name="comment" id="comment"></label>

	<div class="feedback__send">
		<input name="attachfile" type="file" accept="image/*" class="feedback__file" id="attachfile">
		<button class="feedback__btn" type="submit" id="write_us" disabled="disabled">Отправить</button>
	</div>

</form>

<script>
window.addEventListener('load', () => {
	
  let feedback__btn = document.getElementById('write_us')
  if (feedback__btn) {
    feedback__btn.addEventListener('click', send_mail)
  }

  let form_write_us = document.querySelectorAll('#form_write_us input')
  for (let i = 0; i < form_write_us.length; i++) {
    form_write_us[i].addEventListener('input', valid_form_write_us)
  }

  function valid_form_write_us (e) {
    let error = []
    let inp = document.querySelectorAll('#form_write_us input')
    for (let i = 0; i < inp.length; i++) {

      if (!inp[i].classList.contains('feedback__file') && inp[i].value.trim().length < 1) {
        error.push(inp[i].previousElementSibling.textContent)
      }
    }

    if (error.length == 0) {
      feedback__btn.removeAttribute('disabled')
      feedback__btn.style.opacity = '1'
    } else if (error.length > 0) {
      feedback__btn.setAttribute('disabled', 'disabled')
      feedback__btn.style.opacity = ''
    }
  }

  function send_mail (e) {
    e.preventDefault()
    let name_user = document.getElementById('name').value
    let company = document.getElementById('company').value
    let phone = document.getElementById('phone').value
    let time_call = document.getElementById('time-call').value
    let email = document.getElementById('email').value
    let comment = document.getElementById('comment').value

    let attachfile = document.getElementById('attachfile').files[0]
    let data = new FormData()
    data.append('name_user', name_user)
    data.append('company', company)
    data.append('phone', phone)
    data.append('time_call', time_call)
    data.append('email', email)
    data.append('comment', comment)
    data.append('attachfile', attachfile)

    fetch('testmail.php',
      {
        method: "POST",
        body: data
      })
      .then(response => {
        if (response.status !== 200) {
          return Promise.reject();
        }
        return response.json();
      })
      .then(function (data) {
        console.log(JSON.stringify(data))
        console.log(data)
      })
      .catch(() => console.log('ошибка'));
  }
})
</script>

<?php 
/*echo "<pre>";
echo $_GET;
echo $_POST;
print_r($_GET);
print_r($_POST);*/

/*$data_json = json_encode($_GET, JSON_UNESCAPED_UNICODE);
echo $data_json;*/


$data_json = json_encode($_POST, JSON_UNESCAPED_UNICODE);
echo $data_json;


/*$data_json = json_encode($_GET, JSON_UNESCAPED_UNICODE);
echo $data_json;
*/
// echo "</pre>";
?>