javascript передача данных

Question

подскажите как передать данные #map-link из скрипта в php, что я не правильно делаю

function geoFindMe() {

  const status = document.querySelector('#status');
  const mapLink = document.querySelector('#map-link');

  mapLink.textContent = '';

  function success(position) {
    const latitude  = position.coords.latitude;
    const longitude = position.coords.longitude;

    status.textContent = '';
    mapLink.textContent = `${latitude}, ${longitude}`;
  }

  function error() {
    status.textContent = 'Не возможно определить местоположение';
  }

  if(!navigator.geolocation) {
    status.textContent = 'Геолокация не поддерживается';
  } else {
    status.textContent = 'Определяем местоположение…';
    navigator.geolocation.getCurrentPosition(success, error);
  }

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

// Указываем путь до файла на сервере, который будет обрабатывать наш запрос 
const url = "maps.php";
 
// Так же как и в GET составляем строку с данными, но уже без пути к файлу 
const params = document.querySelector('#map-link');
 
/* Указываем что соединение у нас будет 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);    
    
}

document.querySelector('#find-me').addEventListener('click', geoFindMe);

в php пытаюсь получить таким образом $a = $_POST['params'];

Answer 1

Во-первых, вы отправляете на сервер не строку, а объект ДОМ (надо не const params = document.querySelector('#map-link'), а const params = document.querySelector('#map-link').textContent).
Во-вторых, чтобы на сервере можно было читать параметры из ассоциативного массива _POST, нужно отправлять форму. Имитировать отправку форму можно объектом FormData. Погуглите о нем. В данном случае отправка будет выглядеть так:

const request = new XMLHttpRequest();
const form = new FormData();
const url = "maps.php";
const params = document.querySelector('#map-link').textContent;
form.append('params', params);
request.open("POST", url, true);
//заголовок формы будет автоматически выставлен
request.addEventListener('load', ()=>{
    if (request.status === 200) console.log(request.responseText);
});
request.send(form);

БЛОГ НА HUSL

javascript передача данных

Ответы (1 шт):