C. Escenario con datos incorrectos

Versión para imprimir.

1. El usuario activa la forma sin capturar datos

Forma

2. Se activa el código del evento submit

Forma

index.html

try {
 const respuesta =
  await submitForm(
   "srv/valida.php", event)
 alert(respuesta.body)
} catch (error) {
 muestraError(error)
}

3. Se invoca el servicio, incluyendo los datos de la forma

Forma

index.html

try {
 const respuesta =
  await submitForm(
   "srv/valida.php", event)
 alert(respuesta.body)
} catch (error) {
 muestraError(error)
}

Request

POST /srv/valida.php HTTP/1.1 Accept: application/json, application/problem+json
Accept-Encoding: gzip, deflate
Accept-Language: es-ES,es;q=0.9,en;q=0.8
Connection: keep-alive
Content-Length: 230
Content-Type: multipart/form-data;
boundary=----WebKitFormBoundaryWv6BXE9Yr1Q8AqnN
Cookie: __gsas=ID=329641bd2728ff51:T=1743534294:RT=1743534294:S=ALNI_MavjA3FPY-hDE5wNZO5LxFSOVeIIQ; __test=6409d42a9d124b0fcecbb489e113453c
Host: srvvalida.rf.gd
Origin: http://srvvalida.rf.gd
Referer: http://srvvalida.rf.gd/?i=1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

saludo:
nombre: ------WebKitFormBoundaryWv6BXE9Yr1Q8AqnN
Content-Disposition: form-data; name="saludo"


------WebKitFormBoundaryWv6BXE9Yr1Q8AqnN
Content-Disposition: form-data; name="nombre"


------WebKitFormBoundaryWv6BXE9Yr1Q8AqnN--

srv/valida.php

$saludo = leeTexto("saludo");
$nombre = leeTexto("nombre");
if (
 $saludo === false
 || $saludo === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltasaludo.html",
  title: "Falta el saludo.",
 );
}
if (
 $nombre === false
 || $nombre === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltanombre.html",
  title: "Falta el nombre.",
 );
}
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

Despierta y recibe request.

4. El servicio lee los datos

index.html

try {
 const respuesta =
  await submitForm(
   "srv/valida.php", event)
 alert(respuesta.body)
} catch (error) {
 muestraError(error)
}

Hace wait esperando response.

srv/valida.php

$saludo = leeTexto("saludo");
$nombre = leeTexto("nombre");
if (
 $saludo === false
 || $saludo === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltasaludo.html",
  title: "Falta el saludo.",
 );
}
if (
 $nombre === false
 || $nombre === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltanombre.html",
  title: "Falta el nombre.",
 );
}
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

Request

POST /srv/valida.php HTTP/1.1 Accept: application/json, application/problem+json
Accept-Encoding: gzip, deflate
Accept-Language: es-ES,es;q=0.9,en;q=0.8
Connection: keep-alive
Content-Length: 230
Content-Type: multipart/form-data;
boundary=----WebKitFormBoundaryWv6BXE9Yr1Q8AqnN
Cookie: __gsas=ID=329641bd2728ff51:T=1743534294:RT=1743534294:S=ALNI_MavjA3FPY-hDE5wNZO5LxFSOVeIIQ; __test=6409d42a9d124b0fcecbb489e113453c
Host: srvvalida.rf.gd
Origin: http://srvvalida.rf.gd
Referer: http://srvvalida.rf.gd/?i=1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

saludo:
nombre: ------WebKitFormBoundaryWv6BXE9Yr1Q8AqnN
Content-Disposition: form-data; name="saludo"


------WebKitFormBoundaryWv6BXE9Yr1Q8AqnN
Content-Disposition: form-data; name="nombre"


------WebKitFormBoundaryWv6BXE9Yr1Q8AqnN--

Memoria (Servidor)

$saludo
""
$nombre
""

5. El servicio comprueba que el saludo sea válido

index.html

try {
 const respuesta =
  await submitForm(
   "srv/valida.php", event)
 alert(respuesta.body)
} catch (error) {
 muestraError(error)
}

Hace wait esperando response.

srv/valida.php

$saludo = leeTexto("saludo");
$nombre = leeTexto("nombre");
if (
 $saludo === false
 || $saludo === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltasaludo.html",
  title: "Falta el saludo.",
 );
}
if (
 $nombre === false
 || $nombre === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltanombre.html",
  title: "Falta el nombre.",
 );
}
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

Memoria (Servidor)

$saludo
""
$nombre
""

6. Como el saludo no es válido, aborta y genera la response

index.html

try {
 const respuesta =
  await submitForm(
   "srv/valida.php", event)
 alert(respuesta.body)
} catch (error) {
 muestraError(error)
}

Hace wait esperando response.

srv/valida.php

$saludo = leeTexto("saludo");
$nombre = leeTexto("nombre");
if (
 $saludo === false
 || $saludo === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltasaludo.html",
  title: "Falta el saludo.",
 );
}
if (
 $nombre === false
 || $nombre === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltanombre.html",
  title: "Falta el nombre.",
 );
}
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

Response

HTTP/1.1 400 Bad Request Server: openresty
Date: Fri, 02 May 2025 13:53:21 GMT
Content-Type: application/problem+json
Transfer-Encoding: chunked
Connection: keep-alive
{"title":"Falta el saludo.","type":"\/error\/faltasaludo.html"}

7. El servicio devuelve la response, que es recibida en el cliente

index.html

try {
 const respuesta =
  await submitForm(
   "srv/valida.php", event)
 alert(respuesta.body)
} catch (error) {
 muestraError(error)
}

Despierta y recibe response.

Response

HTTP/1.1 400 Bad Request Server: openresty
Date: Fri, 02 May 2025 13:53:21 GMT
Content-Type: application/problem+json
Transfer-Encoding: chunked
Connection: keep-alive
{"title":"Falta el saludo.","type":"\/error\/faltasaludo.html"}

srv/valida.php

$saludo = leeTexto("saludo");
$nombre = leeTexto("nombre");
if (
 $saludo === false
 || $saludo === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltasaludo.html",
  title: "Falta el saludo.",
 );
}
if (
 $nombre === false
 || $nombre === ""
) {
 throw new ProblemDetails(
  status: ProblemDetails::BadRequest,
  type: "/error/faltanombre.html",
  title: "Falta el nombre.",
 );
}
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

Devuelve response y se duerme.

8. Como hay error, lanza una excepción que atrapa catch

index.html

try {
 const respuesta =
  await submitForm(
   "srv/valida.php", event)
 alert(respuesta.body)
} catch (error) {
 muestraError(error)
}

Response

HTTP/1.1 400 Bad Request Server: openresty
Date: Fri, 02 May 2025 13:53:21 GMT
Content-Type: application/problem+json
Transfer-Encoding: chunked
Connection: keep-alive
{"title":"Falta el saludo.","type":"\/error\/faltasaludo.html"}

Memoria

error
ProblemDetails
status
400
type
"/error/faltasaludo.html"
title
"Falta el saludo."

9. Muestra los detalles de la excepción en la consola y en un alert

index.html

try {
 const respuesta =
  await submitForm(
   "srv/valida.php", event)
 alert(respuesta.body)
} catch (error) {
 muestraError(error)
}

Memoria

error
ProblemDetails
status
400
type
"/error/faltasaludo.html"
title
"Falta el saludo."

Alert

Falta el saludo

Código 400 /error/faltasaludo.html

Consola

POST http://srvvalida.rf.gd/srv/valida.php 400 (Bad Request) submitForm.js:21 submitForm @ submitForm.js:21
procesaForma @ ?i=1:53
onsubmit @ ?i=1:17

Falta el saludo. muestraError.js:27
Código: 400 /error/faltasaludo.html muestraError @ muestraError.js:27
procesaForma @ ?i=1:57
await in procesaForma
onsubmit @ ?i=1:17

ProblemDetails: Falta el saludo. muestraError.js:28
at consumeJson (http://srvvalida.rf.gd/lib/js/consumeJson.js:69:11)
at async procesaForma (http://srvvalida.rf.gd/?i=1:53:6) muestraError @ muestraError.js:28
procesaForma @ ?i=1:57
await in procesaForma
onsubmit @ ?i=1:17

Headers: muestraError.js:29 muestraError @ muestraError.js:29
procesaForma @ ?i=1:57
await in procesaForma
onsubmit @ ?i=1:17

connection = keep-alive muestraError.js:30 (anónimo) @ muestraError.js:30
muestraError @ muestraError.js:30
procesaForma @ ?i=1:57
await in procesaForma
onsubmit @ ?i=1:17

content-type = application/problem+json muestraError.js:30 (anónimo) @ muestraError.js:30
muestraError @ muestraError.js:30
procesaForma @ ?i=1:57
await in procesaForma
onsubmit @ ?i=1:17

date = Fri, 02 May 2025 14:22:55 GMT muestraError.js:30 (anónimo) @ muestraError.js:30
muestraError @ muestraError.js:30
procesaForma @ ?i=1:57
await in procesaForma
onsubmit @ ?i=1:17

server = openresty muestraError.js:30 (anónimo) @ muestraError.js:30
muestraError @ muestraError.js:30
procesaForma @ ?i=1:57
await in procesaForma
onsubmit @ ?i=1:17

transfer-encoding = chunked muestraError.js:30 (anónimo) @ muestraError.js:30
muestraError @ muestraError.js:30
procesaForma @ ?i=1:57
await in procesaForma
onsubmit @ ?i=1:17

10. Al cerrar el alert, termina el evento

index.html

try {
 const respuesta =
  await submitForm(
   "srv/valida.php", event)
 alert(respuesta.body)
} catch (error) {
 muestraError(error)
}

Consola

POST http://srvvalida.rf.gd/srv/valida.php 400 (Bad Request) submitForm.js:21 submitForm @ submitForm.js:21
procesaForma @ ?i=1:53
onsubmit @ ?i=1:17

Falta el saludo. muestraError.js:27
Código: 400 /error/faltasaludo.html muestraError @ muestraError.js:27
procesaForma @ ?i=1:57
await in procesaForma
onsubmit @ ?i=1:17

ProblemDetails: Falta el saludo. muestraError.js:28
at consumeJson (http://srvvalida.rf.gd/lib/js/consumeJson.js:69:11)
at async procesaForma (http://srvvalida.rf.gd/?i=1:53:6) muestraError @ muestraError.js:28
procesaForma @ ?i=1:57
await in procesaForma
onsubmit @ ?i=1:17

Headers: muestraError.js:29 muestraError @ muestraError.js:29
procesaForma @ ?i=1:57
await in procesaForma
onsubmit @ ?i=1:17

connection = keep-alive muestraError.js:30 (anónimo) @ muestraError.js:30
muestraError @ muestraError.js:30
procesaForma @ ?i=1:57
await in procesaForma
onsubmit @ ?i=1:17

content-type = application/problem+json muestraError.js:30 (anónimo) @ muestraError.js:30
muestraError @ muestraError.js:30
procesaForma @ ?i=1:57
await in procesaForma
onsubmit @ ?i=1:17

date = Fri, 02 May 2025 14:22:55 GMT muestraError.js:30 (anónimo) @ muestraError.js:30
muestraError @ muestraError.js:30
procesaForma @ ?i=1:57
await in procesaForma
onsubmit @ ?i=1:17

server = openresty muestraError.js:30 (anónimo) @ muestraError.js:30
muestraError @ muestraError.js:30
procesaForma @ ?i=1:57
await in procesaForma
onsubmit @ ?i=1:17

transfer-encoding = chunked muestraError.js:30 (anónimo) @ muestraError.js:30
muestraError @ muestraError.js:30
procesaForma @ ?i=1:57
await in procesaForma
onsubmit @ ?i=1:17