Ajax - les messages d'erreur avec echo
Résolu
lina-24
Messages postés
63
Date d'inscription
Statut
Membre
Dernière intervention
-
lina-24 Messages postés 63 Date d'inscription Statut Membre Dernière intervention -
lina-24 Messages postés 63 Date d'inscription Statut Membre Dernière intervention -
Salut à tous,
J'ai une petit problème en Ajax, j'ai un formulaire qui envoie a ma base de donnée DDB en Ajax
Mais le soucis c'est que je ne peux plus afficher les messages d'erreur avec echo "..."; puisque la page ne se rafraîchie plus.
quand un utilisateur insert une adresse e-mail doublon ,
j'aimerai donc savoir comment faire pour afficher les messages d'erreurs, on m'a dit de faire une requête Ajax mais je gère pas du tout ça, merci à vous.
J'ai une petit problème en Ajax, j'ai un formulaire qui envoie a ma base de donnée DDB en Ajax
Mais le soucis c'est que je ne peux plus afficher les messages d'erreur avec echo "..."; puisque la page ne se rafraîchie plus.
quand un utilisateur insert une adresse e-mail doublon ,
j'aimerai donc savoir comment faire pour afficher les messages d'erreurs, on m'a dit de faire une requête Ajax mais je gère pas du tout ça, merci à vous.
<?php
if($_POST) {
// database connection
$server = '127.0.0.1';
$username = 'root';
$password = '';
$dbname = 'base';
$conn = new mysqli($server, $username, $password, $dbname);
// check db connection error message NE MARCHE PAS :( je ne sais pas pourquoi?
if($conn->connect_error) {
die("Connection Failed : " . $conn->connect_error);
}
else {
// echo "Successfully Connected";
}
$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)) {
//******************************************************************
// Vérification doublon email avant validation du formulaire
$sql = "SELECT * FROM visitor WHERE email = '$email' ";
$result = $conn->query($sql);
$row = $result -> fetch_array(MYSQLI_ASSOC);
if (empty($row)){
// dans ce cas, la requete n'a rien retourné..
}else{
echo "L'email existe déjà !";
}
// dans ce cas, ALERTE AJAX .. NE MARCHE PAS :( je ne sais pas pourquoi?
// ******************************************************
// Insert into database
$sql = "INSERT INTO visitor (Name, email, Image) VALUES ('$name','$email','$url')";
if($conn->query($sql) === TRUE) {
$valid['success'] = true;
$valid['messages'] = "Successfully Uploaded";
// dans ce cas, ALERTE AJAX .. MARCHE :)
// ******************************************************
}
else {
$valid['success'] = false;
$valid['messages'] = "Erreur lors du telechargement";
}
// dans ce cas, ALERTE AJAX .. NE MARCHE PAS :( je ne sais pas pourquoi?
// ******************************************************
$conn->close();
}
else {
$valid['success'] = false;
$valid['messages'] = "Error while uploading";
}
}
}
echo json_encode($valid);
// upload the file
}
Configuration: Windows / Chrome 86.0.4240.183
A voir également:
- Erreur ajax c est quoi
- Erreur 3000 france tv - Forum Lecteurs et supports vidéo
- Erreur t32 ✓ - Forum Livebox
- Erreur 4201 france tv ✓ - Forum Réseaux sociaux
- Erreur 0x80070643 - Accueil - Windows
- Erreur 4101 france tv - Forum Lecteurs et supports vidéo
8 réponses
Tu dois remplacer les ECHO ( et les DIE )
par l'utilisation des variables
Ton script Ajax dans le JS doit certainement être avec la paramètre dataype:"json"
Donc... il faut absolument que tu renvoies du JSON ...
Tu aurais du le voir..... si, dans ton appel Ajax dans ton JSON tu avais gérer le error ou le fail
PS: A l'avenir, merci de préciser le langage dans les balises de code.
Explications à lire ENTIEREMENT disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
.
par l'utilisation des variables
$valid['success'] = false; $valid['messages'] = "L'email existe déjà !";
Ton script Ajax dans le JS doit certainement être avec la paramètre dataype:"json"
Donc... il faut absolument que tu renvoies du JSON ...
Tu aurais du le voir..... si, dans ton appel Ajax dans ton JSON tu avais gérer le error ou le fail
PS: A l'avenir, merci de préciser le langage dans les balises de code.
Explications à lire ENTIEREMENT disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
.
Code Java script
code html
code php
<script type="text/javascript"> var btnCust = '<button type="button" class="btn btn-default" title="Add picture tags" ' + '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: 'Cancel or reset changes', elErrorContainer: '#kv-avatar-errors-2', msgErrorClass: 'alert alert-block alert-danger', defaultPreviewContent: '<img src="uploads/default-avatar.jpg" alt="Your Avatar" style="width:160px"><h6 class="text-muted">Click to select</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="Close"><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="Close"><span aria-hidden="true">×</span></button>'+ response.messages + '</div>'); } } }); return false; }); }); </script>
code html
<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">Submit</button> </form> </div>
code php
<?php if($_POST) { // database connection $server = '127.0.0.1'; $username = 'root'; $password = ''; $dbname = 'base'; $conn = new mysqli($server, $username, $password, $dbname); // check db connection error message NE MARCHE PAS :( je ne sais pas pourquoi? if($conn->connect_error) { die("Connection Failed : " . $conn->connect_error); } else { // echo "Successfully Connected"; } $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)) { //****************************************************************** // Vérification doublon email avant validation du formulaire $sql = "SELECT * FROM visitor WHERE email = '$email' "; $result = $conn->query($sql); $row = $result -> fetch_array(MYSQLI_ASSOC); if (empty($row)){ // dans ce cas, la requete n'a rien retourné.. }else{ $valid['success'] = false; $valid['messages'] = "L'email existe déjà !"; } // dans ce cas, ALERTE AJAX .. NE MARCHE PAS :( je ne sais pas pourquoi? // ****************************************************** // Insert into database $sql = "INSERT INTO visitor (Name, email, Image) VALUES ('$name','$email','$url')"; if($conn->query($sql) === TRUE) { $valid['success'] = true; $valid['messages'] = "Successfully Uploaded"; // dans ce cas, ALERTE AJAX .. MARCHE :) // ****************************************************** } else { $valid['success'] = false; $valid['messages'] = "Erreur lors du telechargement"; } // dans ce cas, ALERTE AJAX .. NE MARCHE PAS :( je ne sais pas pourquoi? // ****************************************************** $conn->close(); } else { $valid['success'] = false; $valid['messages'] = "Error while uploading"; } } } echo json_encode($valid); // upload the file }
Commence par modifier ton appel ajax comme ceci
et côté PHP, je pense que tu peux remplacer ton code par :
Puis vide le cache de ton navigateur et refait un essai.
Et si ça ne marche toujours pas, fais une capture de la CONSOLE de ton navigateur et montre la nous.
PS: Je te rappelle que pour débuguer de l'ajax, je te recommande fortement d'utiliser le navigateur firefox ... et surtout.. n'oublie pas d'activer le debugage XHR
$.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("Reponse 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="Close"><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="Close"><span aria-hidden="true">×</span></button>'+ msg + '</div>'); } }, error: function(xhr, ajaxOptions, error){ console.log('ERREUR AJAX',xhr, ajaxOptions, error); var errorMessage = xhr.status + ': ' + xhr.statusText alert('Error - ' + errorMessage); } });
et côté PHP, je pense que tu peux remplacer ton code par :
<?php // database connection $server = '127.0.0.1'; $username = 'root'; $password = ''; $dbname = 'base'; $conn = new mysqli($server, $username, $password, $dbname); // check db connection error message NE MARCHE PAS :( je ne sais pas pourquoi? if($conn->connect_error) { $valid['success'] = false; $valid['messages'] = "Connection Failed : " . $conn->connect_error; echo json_encode($valid); exit; } //recupération PROPRE des variables AVANT de les utiliser $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'] = "Aucun fichier à uploader !"; 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)) { //****************************************************************** // Vérification doublon email avant validation du formulaire $sql = "SELECT * FROM visitor WHERE email = '$email' "; $result = $conn->query($sql); $row = $result->fetch_array(MYSQLI_ASSOC); if (empty($row)){ // dans ce cas, la requete n'a rien retourné.. // Insert into database $sql = "INSERT INTO visitor (Name, email, Image) VALUES ('$name','$email','$url')"; if($conn->query($sql) === TRUE) { $valid['success'] = true; $valid['messages'] = "Successfully Uploaded"; // dans ce cas, ALERTE AJAX .. MARCHE :) // ****************************************************** } else { $valid['success'] = false; $valid['messages'] = "Erreur lors du l'insertion en bdd"; } } else { $valid['success'] = false; $valid['messages'] = "L'email existe déjà !"; } } else { $valid['success'] = false; $valid['messages'] = "Error while uploading"; } } } $conn->close(); echo json_encode($valid); exit; ?>
Puis vide le cache de ton navigateur et refait un essai.
Et si ça ne marche toujours pas, fais une capture de la CONSOLE de ton navigateur et montre la nous.
PS: Je te rappelle que pour débuguer de l'ajax, je te recommande fortement d'utiliser le navigateur firefox ... et surtout.. n'oublie pas d'activer le debugage XHR
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
bonjour
j'ai bien modifier l'appel ajax que vous avez envoyé .
ça ne marche pas :( en plus l'affichage de la miniature a disparus !
je pense que le script Aajax appartient au bouton uplourd image avec l'aperçu de l'image.
es que on doit pas aussi crée un autre appel ajax pour le champs de saisie e-mail ?
j'ai bien modifier l'appel ajax que vous avez envoyé .
ça ne marche pas :( en plus l'affichage de la miniature a disparus !
je pense que le script Aajax appartient au bouton uplourd image avec l'aperçu de l'image.
es que on doit pas aussi crée un autre appel ajax pour le champs de saisie e-mail ?

l'erreur se trouve à la ligne 13 du code javascript que je t'ai donné comme tu peux le voir il y a un point en trop c'est dû à une erreur de frappe de ma part
<html> <head> <title></title> <!-- boostrap css--> <link rel="stylesheet" type="text/css" href="assets/bootstrap/css/bootstrap.min.css"> <!-- file 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>Upload 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">Submit</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> <!-- file 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="Add picture tags" ' + '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: 'Cancel or reset changes', elErrorContainer: '#kv-avatar-errors-2', msgErrorClass: 'alert alert-block alert-danger', defaultPreviewContent: '<img src="uploads/default-avatar.jpg" alt="Your Avatar" style="width:160px"><h6 class="text-muted">Click to select</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("Reponse 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="Close"><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="Close"><span aria-hidden="true">×</span></button>'+ msg + '</div>'); } }, error: function(xhr, ajaxOptions, error){ console.log('ERREUR AJAX',xhr, ajaxOptions, error); var errorMessage = xhr.status + ': ' + xhr.statusText alert('Error - ' + errorMessage); } }); </script> </body> </html>
Tu as oublié de fermer des balises dans ton js ...
Essaye comme ça
Essaye comme ça
<script type="text/javascript"> var btnCust = '<button type="button" class="btn btn-default" title="Add picture tags" ' + '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: 'Cancel or reset changes', elErrorContainer: '#kv-avatar-errors-2', msgErrorClass: 'alert alert-block alert-danger', defaultPreviewContent: '<img src="uploads/default-avatar.jpg" alt="Your Avatar" style="width:160px"><h6 class="text-muted">Click to select</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("Reponse 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="Close"><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="Close"><span aria-hidden="true">×</span></button>'+ msg + '</div>'); } }, error: function(xhr, ajaxOptions, error){ console.log('ERREUR 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>
Au passage, je viens de faire quelques corrections au niveau du code php
<?php // database connection $server = '127.0.0.1'; $username = 'root'; $password = ''; $dbname = 'base'; $conn = new mysqli($server, $username, $password, $dbname); // check db connection error message NE MARCHE PAS :( je ne sais pas pourquoi? if($conn->connect_error) { $valid['success'] = false; $valid['messages'] = "Connection Failed : " . $conn->connect_error; echo json_encode($valid); exit; } //recupération PROPRE des variables AVANT de les utiliser $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'] = "Aucun fichier à uploader !"; 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)) { //****************************************************************** // Vérification doublon email avant validation du formulaire $sql = "SELECT * FROM visitor WHERE email = '$email' "; $result = $conn->query($sql); $row = $result->fetch_array(MYSQLI_ASSOC); if (empty($row)){ // dans ce cas, la requete n'a rien retourné.. // Insert into database $sql = "INSERT INTO visitor (Name, email, Image) VALUES ('$name','$email','$url')"; if($conn->query($sql) === TRUE) { $valid['success'] = true; $valid['messages'] = "Successfully Uploaded"; // dans ce cas, ALERTE AJAX .. MARCHE :) // ****************************************************** } else { $valid['success'] = false; $valid['messages'] = "Erreur lors du l'insertion en bdd"; } } else { $valid['success'] = false; $valid['messages'] = "L'email existe déjà !"; } } else { $valid['success'] = false; $valid['messages'] = "Error while uploading"; } } } else { $valid['success'] = false; $valid['messages'] = "Extension non autorisée"; } $conn->close(); echo json_encode($valid); exit; ?>
2 - Montre le code PHP modifié
3 - Montre nous la console de ton navigateur ( A noter que pour débuguer de l'ajax, je te recommande fortement d'utiliser le navigateur firefox ... et surtout.. n'oublie pas d'activer le debugage XHR )
4 - N'oublie pas d'appliquer les consignes pour poster correctement ton code sur le forum ( en précisant le langage dans les balises de code )