Ajax - mensajes de error con echo
Resuelto
lina-24
Mensajes publicados
65
Estado
Miembro
-
lina-24 Mensajes publicados 65 Estado Miembro -
lina-24 Mensajes publicados 65 Estado Miembro -
Hola a todos,
Tengo un pequeño problema con Ajax, tengo un formulario que envía a mi base de datos DDB en Ajax
Pero el problema es que ya no puedo mostrar los mensajes de error con echo "..."; ya que la página no se refresca.
Cuando un usuario inserta una dirección de correo electrónico duplicada,
me gustaría saber cómo hacer para mostrar los mensajes de error, me dijeron que hiciera una consulta Ajax, pero no manejo eso en absoluto, gracias a ustedes.
Configuración: Windows / Chrome 86.0.4240.183
Tengo un pequeño problema con Ajax, tengo un formulario que envía a mi base de datos DDB en Ajax
Pero el problema es que ya no puedo mostrar los mensajes de error con echo "..."; ya que la página no se refresca.
Cuando un usuario inserta una dirección de correo electrónico duplicada,
me gustaría saber cómo hacer para mostrar los mensajes de error, me dijeron que hiciera una consulta Ajax, pero no manejo eso en absoluto, gracias a ustedes.
<?php
if($_POST) {
// conexión a la base de datos
$server = '127.0.0.1';
$username = 'root';
$password = '';
$dbname = 'base';
$conn = new mysqli($server, $username, $password, $dbname);
// comprobar mensaje de error de conexión a la base de datos NO FUNCIONA :( no sé por qué?
if($conn->connect_error) {
die("Conexión fallida: " . $conn->connect_error);
}
else {
// echo "Conectado exitosamente";
}
$valid = array('success' => false, 'messages' => array());
$name = $_POST['fullName'];
$lastname = $_POST['lastname'];
$email = $_POST['email'];
$type = explode('.', $_FILES['userImage']['name']);
$type = $type[count($type) - 1];
$url = '/uploads/files/' . uniqid(rand()) . '.' . $type;
if(in_array($type, array('gif', 'jpg', 'jpeg', 'png'))) {
if(is_uploaded_file($_FILES['userImage']['tmp_name'])) {
if(move_uploaded_file($_FILES['userImage']['tmp_name'], $url)) {
//******************************************************************
// Verificación de duplicado de correo electrónico antes de validar el formulario
$sql = "SELECT * FROM visitor WHERE email = '$email' ";
$result = $conn->query($sql);
$row = $result -> fetch_array(MYSQLI_ASSOC);
if (empty($row)){
// en este caso, la consulta no ha devuelto nada..
}else{
echo "¡El correo electrónico ya existe!";
}
// en este caso, ALERTA AJAX .. NO FUNCIONA :( no sé por qué?
// ******************************************************
// Insertar en la base de datos
$sql = "INSERT INTO visitor (Name, email, Image) VALUES ('$name','$email','$url')";
if($conn->query($sql) === TRUE) {
$valid['success'] = true;
$valid['messages'] = "Cargado exitosamente";
// en este caso, ALERTA AJAX .. FUNCIONA :)
// ******************************************************
}
else {
$valid['success'] = false;
$valid['messages'] = "Error al cargar";
}
// en este caso, ALERTA AJAX .. NO FUNCIONA :( no sé por qué?
// ******************************************************
$conn->close();
}
else {
$valid['success'] = false;
$valid['messages'] = "Error al subir";
}
}
}
echo json_encode($valid);
// subir el archivo
}
Configuración: Windows / Chrome 86.0.4240.183
8 respuestas
-
Debes reemplazar los ECHO (y los DIE)
por el uso de variables$valid['success'] = false; $valid['messages'] = "¡El correo electrónico ya existe!";
Tu script Ajax en JS debe tener el parámetro datatype:"json"
Entonces... es absolutamente necesario que devuelvas JSON...
Debiste haberlo visto... si, en tu llamada Ajax en tu JSON, hubieras manejado el error o el fallo
PD: En el futuro, gracias por especificar el lenguaje en las etiquetas de código.
Explicaciones para leer COMPLETAMENTE disponibles aquí: https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
.
--
Cordialmente,
Jordane-
- 1 - Muestra tu código Javascript
2 - Muestra el código PHP modificado
3 - Muéstranos la consola de tu navegador (A tener en cuenta que para depurar AJAX, te recomiendo encarecidamente que uses el navegador Firefox... y sobre todo, no olvides activar la depuración XHR)
4 - No olvides aplicar las instrucciones para publicar correctamente tu código en el foro (especificando el lenguaje en las etiquetas de código)
-
-
Code Java script
<script type="text/javascript"> var btnCust = '<button type="button" class="btn btn-default" title="Agregar etiquetas de imagen" ' + 'onclick="alert(\'Haz clic en la foto para cargar.\')">' + '<i class="glyphicon glyphicon-tag"></i>' + '</button>'; $("#avatar-2").fileinput({ overwriteInitial: true, maxFileSize: 1500, showClose: false, showCaption: false, showBrowse: false, browseOnZoneClick: true, removeLabel: '', removeIcon: '<i class="glyphicon glyphicon-remove"></i>', removeTitle: 'Cancelar o restablecer cambios', elErrorContainer: '#kv-avatar-errors-2', msgErrorClass: 'alert alert-block alert-danger', defaultPreviewContent: '<img src="uploads/default-avatar.jpg" alt="Tu avatar" style="width:160px"><h6 class="text-muted">Haz clic para seleccionar</h6>', layoutTemplates: {main2: '{preview} ' + btnCust + ' {remove} {browse}'}, allowedFileExtensions: ["jpg", "png", "gif"] }); $(document).ready(function(){ $("#uploadImageForm").unbind('submit').bind('submit', function(){ var form = $(this); var formData = new FormData($(this)[0]); $.ajax({ url: form.attr('action'), type: form.attr('method'), data: formData, dataType: 'json', cache: false, contentType: false, processData: false, async: false, success:function(response) { if(response.success == true) { $("#messages").html('<div class="alert alert-success alert-dismissible" role="alert">'+ '<button type="button" class="close" data-dismiss="alert" aria-label="Cerrar"><span aria-hidden="true">×</span></button>'+ response.messages + '</div>'); $('input[type="text"]').val(''); $(".fileinput-remove-button").click(); } else { $("#messages").html('<div class="alert alert-warning alert-dismissible" role="alert">'+ '<button type="button" class="close" data-dismiss="alert" aria-label="Cerrar"><span aria-hidden="true">×</span></button>'+ response.messages + '</div>'); } } }); return false; }); }); </script>
código html<div class="form-group"> <label for="email">correo electrónico</label> <input name="email" type="text" required="required" class="form-control" id="email" placeholder="correo electrónico"> </div> <div class="form-group"> <label for="exampleInputPassword1">Foto</label> <div id="kv-avatar-errors-2" class="center-block" style="width:800px;display:none"></div> <div class="kv-avatar center-block" style="width:200px"> <input id="avatar-2" name="userImage" type="file" class="file-loading"> </div> </div> <button type="submit" class="btn btn-default">Enviar</button> </form> </div>
código php<?php if($_POST) { // conexión a la base de datos $server = '127.0.0.1'; $username = 'root'; $password = ''; $dbname = 'base'; $conn = new mysqli($server, $username, $password, $dbname); // comprobar mensaje de error en la conexión a la base de datos NO FUNCIONA :( no sé por qué? if($conn->connect_error) { die("Conexión fallida: " . $conn->connect_error); } else { // echo "Conectado exitosamente"; } $valid = array('success' => false, 'messages' => array()); $name = $_POST['fullName']; $lastname = $_POST['lastname']; $email = $_POST['email']; $type = explode('.', $_FILES['userImage']['name']); $type = $type[count($type) - 1]; $url = '/uploads/files/' . uniqid(rand()) . '.' . $type; if(in_array($type, array('gif', 'jpg', 'jpeg', 'png'))) { if(is_uploaded_file($_FILES['userImage']['tmp_name'])) { if(move_uploaded_file($_FILES['userImage']['tmp_name'], $url)) { //****************************************************************** // Verificar duplicado de correo electrónico antes de validar el formulario $sql = "SELECT * FROM visitor WHERE email = '$email' "; $result = $conn->query($sql); $row = $result -> fetch_array(MYSQLI_ASSOC); if (empty($row)){ // en este caso, la consulta no devolvió nada.. }else{ $valid['success'] = false; $valid['messages'] = "¡El correo electrónico ya existe!"; } // en este caso, ALERTA AJAX .. NO FUNCIONA :( no sé por qué? // ****************************************************** // Insertar en la base de datos $sql = "INSERT INTO visitor (Name, email, Image) VALUES ('$name','$email','$url')"; if($conn->query($sql) === TRUE) { $valid['success'] = true; $valid['messages'] = "Cargado exitosamente"; // en este caso, ALERTA AJAX .. FUNCIONA :) // ****************************************************** } else { $valid['success'] = false; $valid['messages'] = "Error al cargar"; } // en este caso, ALERTA AJAX .. NO FUNCIONA :( no sé por qué? // ****************************************************** $conn->close(); } else { $valid['success'] = false; $valid['messages'] = "Error al cargar"; } } } echo json_encode($valid); // cargar el archivo } -
-
Comienza a modificar tu llamada ajax así
$.ajax({ url: form.attr('action'), type: form.attr('method'), data: formData, dataType: 'json', cache: false, contentType: false, processData: false, async: false, success:function(response) { console.log("Respuesta ajax",response); var success = typeof(response)!='undefined' && typeof(response.success)!='undefined' ? response.success : null; var msg = typeof(response)!='undefined' && typeof(response.messages)!='undefined' ? response.messages : ""; if(success == true) { $("#messages").html('<div class="alert alert-success alert-dismissible" role="alert">'+ '<button type="button" class="close" data-dismiss="alert" aria-label="Cerrar"><span aria-hidden="true">×</span></button>'+ msg + '</div>'); $('input[type="text"]').val(''); $(".fileinput-remove-button").click(); } else { $("#messages").html('<div class="alert alert-warning alert-dismissible" role="alert">'+ '<button type="button" class="close" data-dismiss="alert" aria-label="Cerrar"><span aria-hidden="true">×</span></button>'+ msg + '</div>'); } }, error: function(xhr, ajaxOptions, error){ console.log('ERROR AJAX',xhr, ajaxOptions, error); var errorMessage = xhr.status + ': ' + xhr.statusText; alert('Error - ' + errorMessage); } });
y en el lado de PHP, creo que puedes reemplazar tu código por:<?php // conexión a la base de datos $server = '127.0.0.1'; $username = 'root'; $password = ''; $dbname = 'base'; $conn = new mysqli($server, $username, $password, $dbname); // verificar el mensaje de error de conexión a la db NO FUNCIONA :( no sé por qué? if($conn->connect_error) { $valid['success'] = false; $valid['messages'] = "Conexión fallida: " . $conn->connect_error; echo json_encode($valid); exit; } //recuperación LIMPIA de variables ANTES de usarlas $name = !empty($_POST['fullName']) ? $_POST['fullName']: NULL; $lastname = !empty($_POST['lastname']) ? $_POST['lastname']: NULL; $email = !empty($_POST['email']) ? $_POST['email']: NULL; $valid = array('success' => false, 'messages' => array()); $userImage = !empty($_FILES['userImage']) ? $_FILES['userImage'] : NULL; if(!$userImage ){ $valid['success'] = false; $valid['messages'] = "¡Ningún archivo para subir!"; echo json_encode($valid); exit; } $ext = end(explode('.', $fileName)); $url = '/uploads/files/' . uniqid(rand()) . '.' . $ext; if(in_array($ext, array('gif', 'jpg', 'jpeg', 'png'))) { if(is_uploaded_file($userImage['tmp_name'])) { if(move_uploaded_file($userImage['tmp_name'], $url)) { //****************************************************************** // Verificación de duplicados de email antes de validar el formulario $sql = "SELECT * FROM visitor WHERE email = '$email' "; $result = $conn->query($sql); $row = $result->fetch_array(MYSQLI_ASSOC); if (empty($row)){ // en este caso, la consulta no devolvió nada.. // Insertar en la base de datos $sql = "INSERT INTO visitor (Name, email, Image) VALUES ('$name','$email','$url')"; if($conn->query($sql) === TRUE) { $valid['success'] = true; $valid['messages'] = "Subido exitosamente"; // en este caso, ALERTA AJAX .. FUNCIONA :) // ****************************************************** } else { $valid['success'] = false; $valid['messages'] = "Error al insertar en la base de datos"; } } else { $valid['success'] = false; $valid['messages'] = "¡El email ya existe!"; } } else { $valid['success'] = false; $valid['messages'] = "Error al subir"; } } } $conn->close(); echo json_encode($valid); exit; ?>
Luego vacía la caché de tu navegador y vuelve a intentarlo.
Y si todavía no funciona, haz una captura de la CONSOLE de tu navegador y muéstranosla.
PD: Te recuerdo que para depurar ajax, te recomiendo encarecidamente usar el navegador firefox ... y sobre todo... no olvides activar la depuración XHR
--
Cordialmente,
Jordane -
-
El error se encuentra en la línea 13 del código JavaScript que te he dado, como puedes ver, hay un punto de más, es debido a un error tipográfico de mi parte.
--
Atentamente,
Jordane-
-
-
<html> <head> <title></title> <!-- boostrap css--> <link rel="stylesheet" type="text/css" href="assets/bootstrap/css/bootstrap.min.css"> <!-- fichier input css --> <link rel="stylesheet" type="text/css" href="assets/fileinput/css/fileinput.min.css"> </head> <body> <div class="col-md-5 col-sm-5 col-md-offset-4 col-sm-offset-4"> <div class="page-header"> <h3>Télécharger une image</h3> </div> <div id="messages"></div> <form action="php_action/uploadImage.php" method="post" enctype="multipart/form-data" id="uploadImageForm"> <div class="form-group"> <label for="email">email</label> <input name="email" type="text" required="required" class="form-control" id="email" placeholder="email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Photo</label> <div id="kv-avatar-errors-2" class="center-block" style="width:800px;display:none"></div> <div class="kv-avatar center-block" style="width:200px"> <input id="avatar-2" name="userImage" type="file" class="file-loading"> </div> </div> <button type="submit" class="btn btn-default">Soumettre</button> </form> </div> <!-- jquery --> <script type="text/javascript" src="assets/jquery/jquery.min.js"></script> <!-- bootsrap js --> <script type="text/javascript" src="assets/bootstrap/js/bootstrap.min.js"></script> <!-- fichier input --> <script src="assets/fileinput/js/plugins/canvas-to-blob.min.js" type="text/javascript"></script> <script src="assets/fileinput/js/plugins/sortable.min.js" type="text/javascript"></script> <script src="assets/fileinput/js/plugins/purify.min.js" type="text/javascript"></script> <script src="assets/fileinput/js/fileinput.min.js"></script> <script type="text/javascript"> var btnCust = '<button type="button" class="btn btn-default" title="Ajouter des balises d'image" ' + 'onclick="alert(\'Cliquez sur la Photo pour télécharger.\')">' + '<i class="glyphicon glyphicon-tag"></i>' + '</button>'; $("#avatar-2").fileinput({ overwriteInitial: true, maxFileSize: 1500, showClose: false, showCaption: false, showBrowse: false, browseOnZoneClick: true, removeLabel: '', removeIcon: '<i class="glyphicon glyphicon-remove"></i>', removeTitle: 'Annuler ou réinitialiser les modifications', elErrorContainer: '#kv-avatar-errors-2', msgErrorClass: 'alert alert-block alert-danger', defaultPreviewContent: '<img src="uploads/default-avatar.jpg" alt="Votre Avatar" style="width:160px"><h6 class="text-muted">Cliquez pour choisir</h6>', layoutTemplates: {main2: '{preview} ' + btnCust + ' {remove} {browse}'}, allowedFileExtensions: ["jpg", "png", "gif"] }); $(document).ready(function(){ $("#uploadImageForm").unbind('submit').bind('submit', function(){ var form = $(this); var formData = new FormData($(this)[0]); $.ajax({ url: form.attr('action'), type: form.attr('method'), data: formData, dataType: 'json', cache: false, contentType: false, processData: false, async: false, success:function(response) { console.log("Réponse ajax",response); var success = typeof(response)!='undefined' && typeof(response.success)!='undefined' ? response.success : null; var msg = typeof(response)!='undefined' && typeof(response.messages)!='undefined' ? response.messages : ""; if(success == true) { $("#messages").html('<div class="alert alert-success alert-dismissible" role="alert">'+ '<button type="button" class="close" data-dismiss="alert" aria-label="Fermer">< -
Has olvidado cerrar algunas etiquetas en tu js ...
Intenta así<script type="text/javascript"> var btnCust = '<button type="button" class="btn btn-default" title="Añadir etiquetas de imagen" ' + 'onclick="alert(\'Haz clic en la Foto para descargar.\')">' + '<i class="glyphicon glyphicon-tag"></i>' + '</button>'; $("#avatar-2").fileinput({ overwriteInitial: true, maxFileSize: 1500, showClose: false, showCaption: false, showBrowse: false, browseOnZoneClick: true, removeLabel: '', removeIcon: '<i class="glyphicon glyphicon-remove"></i>', removeTitle: 'Cancelar o restablecer cambios', elErrorContainer: '#kv-avatar-errors-2', msgErrorClass: 'alert alert-block alert-danger', defaultPreviewContent: '<img src="uploads/default-avatar.jpg" alt="Tu Avatar" style="width:160px"><h6 class="text-muted">Haz clic para seleccionar</h6>', layoutTemplates: {main2: '{preview} ' + btnCust + ' {remove} {browse}'}, allowedFileExtensions: ["jpg", "png", "gif"] }); function uploadImg(form,formData){ $.ajax({ url: form.attr('action'), type: form.attr('method'), data: formData, dataType: 'json', cache: false, contentType: false, processData: false, async: false, success:function(response) { console.log("Respuesta ajax",response); var success = typeof(response)!='undefined' && typeof(response.success)!='undefined' ? response.success : null; var msg = typeof(response)!='undefined' && typeof(response.messages)!='undefined' ? response.messages : ""; if(success == true) { $("#messages").html('<div class="alert alert-success alert-dismissible" role="alert">'+ '<button type="button" class="close" data-dismiss="alert" aria-label="Cerrar"><span aria-hidden="true">×</span></button>'+ msg + '</div>'); $('input[type="text"]').val(''); $(".fileinput-remove-button").click(); } else { $("#messages").html('<div class="alert alert-warning alert-dismissible" role="alert">'+ '<button type="button" class="close" data-dismiss="alert" aria-label="Cerrar"><span aria-hidden="true">×</span></button>'+ msg + '</div>'); } }, error: function(xhr, ajaxOptions, error){ console.log('ERROR AJAX',xhr, ajaxOptions, error); var errorMessage = xhr.status + ': ' + xhr.statusText; alert('Error - ' + errorMessage); } }); } $(document).ready(function(){ $('#uploadImageForm').on('submit', function(e){ e.preventDefault(); var form = $(this); var formData = new FormData($(this)[0]); uploadImg(form,formData); }); }); </script> -
-
-
-
-
-
Al pasar, acabo de hacer algunas correcciones en el código php
<?php // conexión a la base de datos $server = '127.0.0.1'; $username = 'root'; $password = ''; $dbname = 'base'; $conn = new mysqli($server, $username, $password, $dbname); // comprobar mensaje de error de conexión a la base de datos NO FUNCIONA :( no sé por qué? if($conn->connect_error) { $valid['success'] = false; $valid['messages'] = "Conexión Fallida : " . $conn->connect_error; echo json_encode($valid); exit; } //recuperación PROPIA de las variables ANTES de usarlas $name = !empty($_POST['fullName']) ? $_POST['fullName']: NULL; $lastname = !empty($_POST['lastname']) ? $_POST['lastname']: NULL; $email = !empty($_POST['email']) ? $_POST['email']: NULL; $valid = array('success' => false, 'messages' => array()); $userImage = !empty($_FILES['userImage']) ? $_FILES['userImage'] : NULL; if(!$userImage['tmp_name'] ){ $valid['success'] = false; $valid['messages'] = "¡Ningún archivo para subir!"; echo json_encode($valid); exit; } $ext = end(explode('.', $userImage['tmp_name'])); $url = '/uploads/files/' . uniqid(rand()) . '.' . $ext; if(in_array($ext, array('gif', 'jpg', 'jpeg', 'png'))) { if(is_uploaded_file($userImage['tmp_name'])) { if(move_uploaded_file($userImage['tmp_name'], $url)) { //****************************************************************** // Comprobación de duplicado de email antes de la validación del formulario $sql = "SELECT * FROM visitor WHERE email = '$email' "; $result = $conn->query($sql); $row = $result->fetch_array(MYSQLI_ASSOC); if (empty($row)){ // en este caso, la consulta no ha devuelto nada.. // Insertar en la base de datos $sql = "INSERT INTO visitor (Name, email, Image) VALUES ('$name','$email','$url')"; if($conn->query($sql) === TRUE) { $valid['success'] = true; $valid['messages'] = "Cargado con éxito"; // en este caso, ALERTA AJAX .. FUNCIONA :) // ****************************************************** } else { $valid['success'] = false; $valid['messages'] = "Error al insertar en la base de datos"; } } else { $valid['success'] = false; $valid['messages'] = "¡El email ya existe!"; } } else { $valid['success'] = false; $valid['messages'] = "Error al subir"; } } } else { $valid['success'] = false; $valid['messages'] = "Extensión no permitida"; } $conn->close(); echo json_encode($valid); exit; ?> -
-
-
-
Bonjour Jordane45
no puedo encontrarme con este script que ya no funciona :( ¿es posible limpiarlo para mí y convertirlo en html básico sin código javascript ni css (script en bruto con los mensajes de error en echo)? Te estaría muy agradecida si pudieras hacerlo.







