Каким образом можно выполнить HTTP-запрос к локальному серверу? 

Я только начинаю изучать веб-технологии и после практики с фронтендом решил попробовать бэкенд. В данный момент я пытаюсь разобраться, как отправить HTTP-запрос с HTML-страницы при помощи JavaScript на локальный сервер с PHP. У меня есть следующий HTML-код:

<pre><code class="html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;button id="godb"&gt;Отправить данные&lt;/button&gt;
    &lt;script&gt;
        godb.onclick = function() {
            console.log('ok')
            let user = {
                name: 'John',
                surname: 'Smith'
            };
            let response = fetch('http://localhost/test/php.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json;charset=utf-8'
                },
                body: JSON.stringify(user)
            });
        }
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

Теперь мне нужно понять, как обработать эти данные на стороне PHP и продолжить с ними работу. Существует ли возможность отправлять данные на <a href="http://localhost/test/php.php" rel="nofollow">localhost/test/php.php</a>, используя XAMPP на локальном сервере?
  • 8 ноября 2024 г. 15:33
Ответы на вопрос 2 
Да, вы можете отправлять HTTP-запросы с HTML-страницы на локальный сервер, работающий на XAMPP, с использованием JavaScript и PHP. Вы уже правильно начали с JavaScript и используете `fetch` для выполнения POST-запроса. Рассмотрим, как обработать эти данные на стороне PHP.

### 1. Настройка сервера на XAMPP

Убедитесь, что ваш XAMPP работает, и вы разместили ваш файл `php.php` в каталоге `htdocs` (или в подпапке, например, `test`). Полный путь к файлу будет: `C:\xampp\htdocs\test\php.php` (или `C:\xampp\htdocs\php.php` если вы находитесь непосредственно в папке `htdocs`).

### 2. Обработка данных в PHP

Теперь создайте файл `php.php` со следующим содержимым:

```php
<?php
// Указываем, что ответ будет в формате JSON
header('Content-Type: application/json');

// Прочитаем входящие данные
$data = json_decode(file_get_contents('php://input'), true);

// Проведем какую-то обработку данных, например, вывести их в лог
file_put_contents('log.txt', print_r($data, true), FILE_APPEND);

// Подготовим ответ
$response = [
    'status' => 'success',
    'data' => $data,
];

// Отправляем JSON-ответ
echo json_encode($response);
?>
```

### 3. Модификация JavaScript

Ваш JavaScript код почти готов, но чтобы обработать ответ от сервера, добавьте обработчик `.then()` к вашему запросу `fetch`:

```javascript
godb.onclick = function() {
    console.log('ok');
    let user = {
        name: 'John',
        surname: 'Smith'
    };
    fetch('http://localhost/test/php.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json;charset=utf-8'
        },
        body: JSON.stringify(user)
    })
    .then(response => response.json())  // Обрабатываем ответ от сервера
    .then(data => console.log(data))    // Выводим ответ в консоль
    .catch(error => console.error('Ошибка:', error));  // Обработка ошибок
};
```

### 4. Запуск и тестирование

1. Запустите Apache в панели управления XAMPP.
2. Откройте ваш HTML-файл в браузере (или запустите локальный сервер и откройте адрес, например: `http://localhost/test.html`).
3. Нажимайте на кнопку "Отправить данные", и вы должны увидеть данные, отправленные на сервер, и ответ от сервера в консоли браузера. Также проверяйте файл `log.txt` в папке `test` для проверки логов.

### Заключение

Теперь вы можете отправлять данные с клиентской стороны на сервер и обрабатывать их с помощью PHP. Это основа для построения более сложных веб-приложений и API. Удачи в изучении веб-технологий!
Сейчас я Вас научу плохому :) <br/> В html есть тег FORM <br/> <a href="https://www.w3schools.com/html/html_form_elements.asp" rel="nofollow">https://www.w3schools.com/html/html_form_elements.asp</a> <br/> <br/> Форме можно присвоить id и указать display:none <br/> Отправить ее можно вызвав submit <br/> <br/> Минус броузер уходит на новую страницу.  Указав target=_blank - получим новую вкладку. <br/> Можно объявить окно и подсунуть его имя в таргет - будет посимпотней. <br/> <br/> Элементаршину кончили. Теперь аякс (без перезагрузки и ухода со страницы) <br/> <a href="https://api.jquery.com/jQuery.post/" rel="nofollow">https://api.jquery.com/jQuery.post/</a> <br/> берем супер пушку jQuery и пробуем сперва это делать через готовую либу. <br/> <br/> Теперь про fetch <br/> <a href="https://stackoverflow.com/questions/33439030/how-to-grab-data-using-fetch-api-post-method-in-php" rel="nofollow">https://stackoverflow.com/questions/33439030/how-t...</a> <br/> по ссылке разжевывается <br/> <b>$content = trim(file_get_contents("<a>php://input</a>"));</b> <br/> главное тут, что явоскрипт не кодирует данные в привычном для пыха виде ($_POST,$_GET,$_FILES) пустые и нужно самому их декодить из потока
Похожие вопросы
    Показать ещё