как передать значения из JS в PHP?

509

11 октября 2017, 07:06

кнопка вызывает функцию myFunction, она посылает гет запрос с данными в opportunities.php , а он печатает строку в новом окне.

как сделать так что бы opportunities.php остался отдельным файлом, а результат его выполнения был не на новой странице, а добавился на основной (html)

onclick = "myFunction()" > Подобрать < /button> 
 
  < 
  script > 
  function myFunction() { 
    var v1 = (document.getElementById("type").value); 
    var v2 = (document.getElementById("country").value); 
    var v3 = (document.getElementById("newdate").value); 
    window.location.href = "opportunities.php?type=" + v1 + "& country=" + v2 + "& newdate=" + v3; 
  } < 
  /script> 
 
<?php 
$type =$_GET['type']; 
$country =$_GET['country']; 
$newdate =$_GET['newdate']; 
echo "home_mcs=" . $country . "&type=" . $type . "&earliest_start_date=" . $newdate . "&sort=%2Bcreated" 
?>

Answer 1

Чтобы отправить данные в php нужно выполнить Http запрос, для этого в javascript существует объект XMLHttpRequest.

function myFunction() {
    var v1 = (document.getElementById("type").value);
    var v2 = (document.getElementById("country").value);
    var v3 = (document.getElementById("newdate").value);
    var params = 'type=' + encodeURIComponent(v1) +
                 '&country=' + encodeURIComponent(v2) +
                 '&newdate=' + encodeURIComponent(v3);
   // Создаём объект XMLHttpRequest
   var xhr = new XMLHttpRequest();
   // Инициализация запроса
   xhr.open("GET", '/opportunities.php, true);
   xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
   // Инициализация обработчика события 
   xhr.onreadystatechange = function () {
       // здесь код js который выполнится по завершению запроса
   };
   // послать запрос
   xhr.send(params);
}

Answer 2

Примерно так

$.ajax({ 
  url: 'opportunities.php', 
  method: 'post', 
  dataType: 'json или что-то ещё', 
  data: { 
    type: значение, 
    ... 
  }, 
  success: function(data) { 
    console.log(data); // в data будет выводится то что выдаст скрипт в формате dataType 
  }, 
  error: function(data) { 
    console.log(data); 
  } 
});