Não consegui fazer o HTML mandar mensagem para o PHP

[Frank K Hosaka]

Esses são os códigos astudy.html e astudy.php:

astudy.html

<script>
async function teste() {
	const mensagem=1;
	const response=await fetch('astudy.php',{method:'POST',body:mensagem})
	const body=await response.text()
	recdiv.innerHTML=body;}
</script>
<input type=submit value=Teste onclick=teste()>
<div id=recdiv></div>

------------------------------------------------

astudy.php

<?php
echo '<pre>$_POST: ';
print_r($_POST);
echo '</pre>';

 

[Frank K Hosaka]

Achei outra solução no Google, ele usa a notação JSON:

astudy.html

<meta charset="UTF-8">
<script>
async function teste() {
	data= {mensagem: "olá mundo"}
	const response=await fetch('astudy.php',{method:'POST',body:JSON.stringify(data)})
	const body=await response.text()
	recdiv.innerHTML=body;}
</script>
<input type=submit value=Teste onclick=teste()>
<div id=recdiv></div>

----------------------------------------

astudy.php

<?php
$json = file_get_contents("php://input"); // json string
echo $json;

 

Apesar de eu ter conseguido essa proeza do HTML conversar com o PHP, ainda não faço a menor ideia de como poderei aproveitar. O meu problema é que eu não sei nada de HTML.

[wash]

Boa, sr. @Frank K Hosaka! No fim das contas, conseguiu!
Para receber no php, via $_POST, o body da requisição precisa ser do tipo FormData
Tem um exemplo bem elegante aqui: https://developer.mozilla.org/pt-BR/docs/Web/API/Fetch_API/Using_Fetch

var form = new FormData(document.getElementById('login-form'));
fetch("/login", {
  method: "POST",
  body: form
});

Desta forma, todos os dados do form#login-form serão submetidos

Editado Junho 24, 2022 por wash

[Frank K Hosaka]

Valeu, Wash, mas eu não consegui enxergar o 'login-form' da sua dica. Eu improvisei com a ajuda do Google, e cheguei nesse código:

 

astudy.html

<meta charset="UTF-8">
<script>
async function procurar(pessoa) {
	var form = new FormData();
	form.append("procurar",pessoa);
	const response=await fetch("astudy.php", {method: "POST", body: form});
	const body=await response.text()
	recdiv.innerHTML=body;}
</script>
Procurar Pessoa:<input onchange=procurar(value)>
<div id=recdiv></div>

-------------------------

astudy.php

<?php
$procurar=$_POST['procurar'];
$mysqli=new mysqli("localhost","root","","diario");
$query=$mysqli->query("select * from tbpessoa where pessoa like '%$procurar%' order by pessoa limit 15");
while ($row=$query->fetch_assoc()) {
	echo $row['pessoa'],"<br>";}

Esse código funciona, mas precisava ver como é o 'login-form' que você citou na sua dica. Mais uma vez, obrigado, mesmo.