Задать вопрос
@Solid1Goose
javascript

Как отправить HTTP на локальный сервер?

Я пока познаю веб, и после изучения фронта решил попробовать бек. В общем сейчас пытаюсь понять как со странички с HTML и JS отправить HTTP запрос на локальный сервер с PHP
У меня есть вот такой HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="godb">Отправить данные</button>
    <script>
        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)
        });
    }
    </script>
</body>
</html>

и теперь я хочу понять как мне получить эти данные на той стороне (PHP), ну и дальше работать с ними. Я подозреваю что так вообще нельзя делать как я, а именно отправлять данные на http://localhost/test/php.php. Использую XAMPP для своей локалки.
  • Вопрос задан
  • 254 просмотра
11 комментариев
Подписаться 1 Простой 11 комментариев
Решения вопроса 1
402d
@402d
начинал с бейсика на УКНЦ в 1988
Сейчас я Вас научу плохому :)
В html есть тег FORM
https://www.w3schools.com/html/html_form_elements.asp

Форме можно присвоить id и указать display:none
Отправить ее можно вызвав submit

Минус броузер уходит на новую страницу. Указав target=_blank - получим новую вкладку.
Можно объявить окно и подсунуть его имя в таргет - будет посимпотней.

Элементаршину кончили. Теперь аякс (без перезагрузки и ухода со страницы)
https://api.jquery.com/jQuery.post/
берем супер пушку jQuery и пробуем сперва это делать через готовую либу.

Теперь про fetch
https://stackoverflow.com/questions/33439030/how-t...
по ссылке разжевывается
$content = trim(file_get_contents("php://input"));
главное тут, что явоскрипт не кодирует данные в привычном для пыха виде ($_POST,$_FILES) пустые и нужно самому их декодить из потока
Ответ написан
4 комментария
4 комментария
Пригласить эксперта
Ответы на вопрос 1
@artem-dainov
Php, java, js. Boot spring, jquery, git
Советую к fetch добавить тип который хотим получить и получить данные, что-то типо 
fetch("http://localhost:8080",{
/* тут данные */
}).then((response) => {
if (!response.ok) {
throw new Error("error");
}
return response.json();
}).then((data) => {
console.log(data);
}).catch();


в php делаем это.
<?php
$content = file_get_contents("php://input");
echo $content;
?>

В console.log появится результат который вы отправили. Это позволит вам узнать, отправляются ли данные на сервер. И лучше делать форму, на нее вешать событие submit и отменить поведение по умолчанию.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Веб-дизайн клининговой компании
22 дек. 2024, в 17:54
10000 руб./за проект
Нарисовать UX/UI дизайн для игры. Нарисовать несколько иконок для игры
22 дек. 2024, в 17:45
10000 руб./за проект
Написать макросы для excel
22 дек. 2024, в 17:39
2000 руб./за проект
Ещё заказы