0
127
VistasSalida JSON a HTML CSS
Tengo un formulario de registro, en las salidas de PHP data.error como JSON los errores
exit('{"error": "Passwords do not match!"}');
Después de un registro exitoso, el usuario será redirigido a exit('{"location": "home.php"}');
Quiero que la salida json, en lugar de texto sin formato, se coloque en html + css para diseñar,
para que pueda diseñar div para los errores
document .querySelector(".register form") .addEventListener("submit", async (e) => { e.preventDefault(); const form = e.target; const body = new FormData(form); const res = await fetch(form.action, { method: "POST", body, }); const data = await res.json(); if (data.error) { // If there is an error document.querySelector("#msg").innerHTML = data.error; } else if (data.location) { // If we want to redirect the user somewhere window.location.href = "./" + data.location; } }); Si agrego una clase, <div id="msg" class="error"></div> no genera nada,
mientras que solo el estilo en línea style="background-color:red;"> funcionará
.error { background: #F2DEDE; color: #A94442; border-radius: 4px; font-weight: bold; text-align: center; } 
Estuve investigando esto durante 12 horas, he visto algunos ejemplos sobre JSON.stringify y otros,
pero no sé cómo podría implementar esto en mi código
2 Respuestas
Responde la pregunta0
Pues aún no sé si entiendo bien tu caso. Puede agregar una clase al elemento msg para cuando se devuelva un error.
if (data.error) { // If there is an error document.querySelector("#msg").classList.add("error"); //This will be styled from your CSS. Add a background, etc document.querySelector("#msg").innerHTML = data.error; }CSS:
.error { color: white; font-size: 14px; margin-top: 10px; background-color: red; }0
function login($username, $password) { // do a login // if any errors header('Content-Type: application/json'); echo json_encode($response); exit; // or if you're using any framework/controller then return properly // using a json response containing the error ie "Invalid Login" } Quieres hacer algo como ese lado del servidor. Luego, en el lado del cliente, desea obtener la respuesta, verifique si hay errores y muestre los errores si existen. Use una clase visible o algo así para que pueda cambiar la visibilidad y mostrar errores. Entonces, crea el div y el css de la manera que desea y simplemente usa display: none en él, luego, si obtiene errores, lo hace visible.
No use PHP para generar HTML/CSS, especialmente no de esta manera, a menos que esté usando un motor de visualización adecuado, de lo contrario terminará creando un desastre. Envíe una respuesta JSON adecuada y haga su parte del cliente de UI en función de esa respuesta.