Retour Json

alariel29
Javascript

Bonjour,

j'ai un problème avec mon code, je valide un formulaire dans une fenêtre modale, cela marche avec un retour html, mais quand je change pour un retour json, au lieu d'executer le code de la fonction sucess, cela affiche simplement le echo jsonencode dans la page (faisant ainsi la redirection), je pense donc à une erreur dans le script mais je ne vois pas laquelle

script js

$(document).on('submit', '#reinitialiser', function(event){

    event.preventDefault();
    var form = $('#reinitialiser');

    var nni = $('#login').val();
    var mail = $('#mail').val();
    $.ajax({
        url: form.attr('action'),
        type: form.attr('method'),
        data : form.serialize(),
        datatype: 'json', //JSON
        success:function(json){
            if (json.reponse ==='ok'){
                console.log(json);
                alert('ok');
                else {
                    alert('erreur :' + json.reponse);
                }
            }
        };
});

script php

<?php 

    if ((isset($_POST['login'])) && (isset($_POST['mail'])))    {
        if ((!empty($_POST['login'])) && (!empty($_POST['mail'])))  {
            $reponse ='ok';
        }
        echo json_encode(['reponse' => $reponse]);
    }

?>

14 réponses

sizo0
Réponse acceptée

Essaye ce code en javascript

$(document).ready(function () {
    $('#reinitialiser').submit(function (e) {
        e.preventDefault();
        $.ajax({
            url: 'data.php',
            type: 'POST',
            data : $(this).serialize(),
            dataType: 'json', //JSON
            success:function(json){
                console.log(json);
                if (json.reponse ==='ok'){
                    console.log(json);
                    alert('ok');
                } else {
                    alert('erreur :' + json.reponse);
                }
            }
        })
    })
});
Lartak

Bonjour.
Pour commencer, remplaces : 

if ((isset($_POST['login'])) && (isset($_POST['mail']))) {
    if ((!empty($_POST['login'])) && (!empty($_POST['mail'])))  {

Par :

if (isset($_POST['login']) && isset($_POST['mail'])) {
    if (!empty($_POST['login']) && !empty($_POST['mail'])) {

Ensuite, pour éviter que le reste de ton code/page php ne s'exécute, après ton echo fais par exemple un die();.
Donc au final :

if (isset($_POST['login']) && isset($_POST['mail'])) {
    if (!empty($_POST['login']) && !empty($_POST['mail'])) {
        $reponse = 'ok';
    }
    /* Suite du code */
} else {
    /* Encore du code */
}    
echo json_encode(['reponse' => $reponse]);
die();
alariel29
Auteur

dans les deux cas , cela ne change pas le fait que la page se redirige vers la page du contrôleur en affichant le echo {"reponse":"ok"}
et ne passe pas dans la fonction succes (a mon avis) car je n'ai aucune alerte ou log dans la console

sizo0

Tu peux montrer ton code html !

alariel29
Auteur

voici le code de ma fenêtre modale contenant le formulaire:

<center>
  <div class="modal-header ">
      <button type="button" class="close" data-dismiss="modal">x</button>
      <h4 class="modal-title">Réinitialiser le mot de passe</h4>
  </div>
  <div class="modal-body">
      <form id="reinitialiser" method="post" action="Controler/controler_reinitialisation_mot_de_passe.php">
        <div class="clearfix">
          <div class="form-group">
            <label for="Login" > NNI : </label>
            <input type="text" name="login" id="login" placeholder="NNI" required> 
          </div>
        </div>
        <div class="clearfix">
          <div class="form-group">
          <label for="mail" > Mail : </label>
          <input text name="mail" id="mail" placeholder="Mail" required />
          </div>
        </div>
        <button type="submit" class="btn btn-primary">Envoyer</button>
      </form>
  </div>
  <div class="modal-footer">
    <button class="btn btn-info" data-dismiss="modal">Annuler</button>
  </div>
</center>

<script src="JQuery/jquery.js"></script>
<script src="javascript/app.js"></script>
Lartak

Quand tu parles de redirection, tu veux dire qu'il y a rechargement de la page ?
Nous montres-tu tout le code de la page de traitement en PHP ?
S'il y a une redirection c'est qu'il y a deux possibilités :

  1. Ton code javascript faisant référence au formulaire n'est pas prit en compte
  2. Tu ne nous montre pas tout le code de la page du script PHP et tu dois y avoir une redirection quelque part.
sizo0

tu peux me montrer aussi ton nouveau javascript

alariel29
Auteur

je remet donc l'ensemble des éléments tel que j'ai le problème (sans tenir compte des premières solutions du coup)
le app.js :

$(document).on('submit', '#reinitialiser', function(event){

    event.preventDefault();
    var form = $('#reinitialiser');

    var nni = $('#login').val();
    var mail = $('#mail').val();
    $.ajax({
        url: form.attr('action'),
        type: form.attr('method'),
        data : form.serialize(),
        datatype: 'json',
        success:function(json){
            if (json.reponse ==='ok'){
                console.log(json);
                alert('ok');
                else {
                    alert('erreur :' + json.reponse);
                }
            }
        };
});

le html

<center>
  <div class="modal-header ">
      <button type="button" class="close" data-dismiss="modal">x</button>
      <h4 class="modal-title">Réinitialiser le mot de passe</h4>
  </div>
  <div class="modal-body">
      <form id="reinitialiser" method="post" action="Controler/controler_reinitialisation_mot_de_passe.php">
        <div class="clearfix">
          <div class="form-group">
            <label for="Login" > NNI : </label>
            <input type="text" name="login" id="login" placeholder="NNI" required> 
          </div>
        </div>
        <div class="clearfix">
          <div class="form-group">
          <label for="mail" > Mail : </label>
          <input text name="mail" id="mail" placeholder="Mail" required />
          </div>
        </div>
        <button type="submit" class="btn btn-primary">Envoyer</button>
      </form>
  </div>
  <div class="modal-footer">
    <button class="btn btn-info" data-dismiss="modal">Annuler</button>
  </div>
</center>

<script src="JQuery/jquery.js"></script>
<script src="javascript/app.js"></script>

le php

<?php 
    if ((isset($_POST['login'])) && (isset($_POST['mail'])))    {
        if ((!empty($_POST['login'])) && (!empty($_POST['mail'])))  {
            $reponse ='ok';
        }
        echo json_encode(['reponse' => $reponse]);
    }

?>
sizo0

Est-ce que qd tu remplaces ton javascript avec le mien ça ne marche pas ?
Je l'ai testé et ça marche avec le même code php que t'as mis

alariel29
Auteur

En effet, avec ton code js, cela fonctionne, du coup, quelle est la grande différence entre les deux? à part la différence de déclaration de la fonction?

sizo0

Déjà datatype s'écrit avec un t majuscule dataType

alariel29
Auteur

là du coup, une fois que je clique sur le bouton submit,, le script s'execute et me renvoit en json le l'élément reponse qui vaut ok , validant donc la déclaration json.reponse==='ok'
au niveau reseau et console, je n'ai aucune erreur, la console m'affiche bien le contenu de l'objet json et le reseau me montre bien la requete post en code 200

Lartak

Dans son code javascript, l'une des choses les plus importantes, il fait en sorte que la page soit totalement chargée, ce qui fait qu'en premier lieu tous les fichiers javascripts sont bien chargés et prit en compte.

alariel29
Auteur

En tout cas, merci bien à tous les deux pour cette aide sur le sujet^^ ca me faisais un peu craquer a force