steffengrahl/api.php

## api.php
<?php

try {
    $data = json_decode($_POST['data'], true, 512, JSON_THROW_ON_ERROR);

    header('Content-Type: application/json; charset=utf-8');
    echo json_encode(
        ['message' => 'Ich hab folgende Daten empfangen ' . json_encode($data, JSON_THROW_ON_ERROR)],
        JSON_THROW_ON_ERROR
    );
} catch (JsonException $e) {
    var_dump($e->getMessage());
}

## index.html
<!doctype html>
<html>
<head>
    <title>Meine Internetseite</title>
    <meta charset="UTF-8">
</head>
<body>
<header>
    <h1>
        Meine Internetseite
    </h1>
</header>
<main>
    <section>
        <header>
            <h2>
                Mein Formular
            </h2>
        </header>
        <form method="post" id="meinformular">
            <p id="ausgabe"></p>
            <p>
                <label for="meinfeld">Mein Label</label>
                <input type="text" id="meinfeld" name="meinFeld">
            </p>
            <p>
                <button type="submit">
                    Senden
                </button>
            </p>
        </form>
    </section>
</main>
<script>
    let object = {};
    let meinFormular = document.getElementById('meinformular');
    let ausgabe = document.getElementById('ausgabe');

    meinFormular.addEventListener('submit', (event) => {
      event.preventDefault();
      let formData = new FormData(meinFormular);

      formData.forEach((value, key) => object[key] = value);

      let json = JSON.stringify(object);

      let xhr = new XMLHttpRequest();
      xhr.open('POST', 'http://localhost:8000/api.php', true);
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      xhr.send('data=' + json);
      xhr.onreadystatechange = (e) => {
        ausgabe.innerHTML = xhr.responseText;
      }
    });
</script>
</body>
</html>
	<?php

	try {
	$data = json_decode($_POST['data'], true, 512, JSON_THROW_ON_ERROR);

	header('Content-Type: application/json; charset=utf-8');
	echo json_encode(
	['message' => 'Ich hab folgende Daten empfangen ' . json_encode($data, JSON_THROW_ON_ERROR)],
	JSON_THROW_ON_ERROR
	);
	} catch (JsonException $e) {
	var_dump($e->getMessage());
	}
	<!doctype html>
	<html>
	<head>
	<title>Meine Internetseite</title>
	<meta charset="UTF-8">
	</head>
	<body>
	<header>
	<h1>
	Meine Internetseite
	</h1>
	</header>
	<main>
	<section>
	<header>
	<h2>
	Mein Formular
	</h2>
	</header>
	<form method="post" id="meinformular">
	<p id="ausgabe"></p>
	<p>
	<label for="meinfeld">Mein Label</label>
	<input type="text" id="meinfeld" name="meinFeld">
	</p>
	<p>
	<button type="submit">
	Senden
	</button>
	</p>
	</form>
	</section>
	</main>
	<script>
	let object = {};
	let meinFormular = document.getElementById('meinformular');
	let ausgabe = document.getElementById('ausgabe');

	meinFormular.addEventListener('submit', (event) => {
	event.preventDefault();
	let formData = new FormData(meinFormular);

	formData.forEach((value, key) => object[key] = value);

	let json = JSON.stringify(object);

	let xhr = new XMLHttpRequest();
	xhr.open('POST', 'http://localhost:8000/api.php', true);
	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	xhr.send('data=' + json);
	xhr.onreadystatechange = (e) => {
	ausgabe.innerHTML = xhr.responseText;
	}
	});
	</script>
	</body>
	</html>