0

есть код index.php

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Пример работы AJAX</title>
</head>
<body>


    <script>
    function loadtable1() {
    // if ($('#date_from').val() == '') {
    //  $('#date_from').css('background', 'red');
    //  return;
    // }
    // if ($('#date_to').val() == '') {
    //  $('#date_to').css('background', 'red');
    //  return;
    // }

    

    //после загрузки DOM-дерева страницы
document.addEventListener("DOMContentLoaded",function() {
    //получить кнопку
    let mybutton = document.getElementById('send');
    //подписаться на событие click по кнопке и назначить обработчик, который будет выполнять действия, указанные в безымянной функции
    mybutton.addEventListener("click", function(){
      //1. Сбор данных, необходимых для выполнения запроса на сервере
      let name = document.getElementById('name').value;
      //Подготовка данных для отправки на сервер
      //т.е. кодирование с помощью метода encodeURIComponent
      name = 'nameUser=' + encodeURIComponent(name);
      // 2. Создание переменной request
      let request = new XMLHttpRequest();
      // 3. Настройка запроса
      request.open('POST','xz.php',true);
      // 4. Подписка на событие onreadystatechange и обработка его с помощью анонимной функции
      request.addEventListener('readystatechange', function() {
        //если запрос пришёл и статус запроса 200 (OK)
        if ((request.readyState==4) && (request.status==200)) {
          // например, выведем объект XHR в консоль браузера
          console.log(request);
          // и ответ (текст), пришедший с сервера в окне alert
          console.log(request.responseText);
          // получить элемент c id = welcome
          let welcome = document.getElementById('welcome');
          // заменить содержимое элемента ответом, пришедшим с сервера
          welcome.innerHTML = request.responseText;
        }
      });
      // Устанавливаем заголовок Content-Type(обязательно для метода POST). Он предназначен для указания кодировки, с помощью которой зашифрован запрос. Это необходимо для того, чтобы сервер знал как его раскодировать.
      request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
      // 5. Отправка запроса на сервер. В качестве параметра указываем данные, которые необходимо передать (необходимо для POST)
      request.send(name);
    });
  });

}
    </script>


    <div class="monitoring menu">
        <div class="calls module">
            <table class="table table-head table-striped ">
                <tr>
                    <th colspan=2><label for="date_from">От: </label><input type="date" id="date_from" value=""></th>
                    <th colspan=2><label for="date_to">До: </label><input type="date" id="date_to" value=""></th>
                    <th><button class="btn btn-primary" id="send" onclick="loadtable1();">Отчет</button></th>
                   
            </table>

    <div id="welcome">ad</div> 


</body>
</html>

серверная часть xz.php

<?php
// создадим переменную для формирования ответа
$output ='';
// если в массиве пост есть ключ nameUser, то
if (isset($_POST['nameUser'])) {
  // в переменную name помещаем переданное с помощью запроса имя
  $name = $_POST['nameUser'];
  // добавляем в переменную output строку приветствия с именем
  $output .= 'Здравствуйте, '.$name.'! ';
  // добавляем в переменную output IP-адрес пользователя
  if ($_SERVER['REMOTE_ADDR']) {
    $output .= 'Ваш IP адрес: '. $_SERVER['REMOTE_ADDR'];
  }
  else {
   $output .= 'Ваш IP адрес неизвестен.';
  }
  // выводим ответ
  echo $output;
}

При нажатии кнопки в блоке должен вывести текст с ip адресом, но при нажатии кнопуи ничего не происходит и ошибки не возникает

0

1 ответ 1

1

Чтобы заработало:

  1. Удалить строку с объявлением функции:
    function loadtable1() {
  1. Удалить строку с единственной парной фигурной скобкой } от вышеупомянутой ф-ии

  2. Добавить в форму input-элемент (type=text) с id="name"

  3. Удалить у button-элемента атрибут onclick

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.