Ajax: comment faire?

Résolu

sevs -
sevs - 24 nov. 2016 à 21:03

Bonjour,
Je cherche à configurer un script AJAX qui me permettrait d'enregistrer les données d'un textaera.
La question est comment puis je récupérer la variable correctement dans mon php?

Afficher la suite

4 réponses

jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830

Bon....

J'ai finalement décidé de coder.

Déjà.. je n'avais pas vu que tu utilisais ckeditor. (ce qui n'est pas la même chose qu'avec un simple textarea).

Coté HTML ça donne ça :

<html>
  <head>
    <meta charset="utf-8">
    <title>news</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <!-- Make sure the path to CKEditor is correct. -->
    <script src="ckeditor.js"></script>
  </head>
  <body onload='timer()'>
    <form action="Mail3" method="POST">
      <textarea name="editor1" id="editor1" rows="10" cols="80" placeholder="Saissisez votre message ici"></textarea>
      <input type="submit" name="soumettre" value="envoyer">
    </form>
    <input id="infosMsg" value="" style="width:200px;">

     
  <script text="javascript">
  
  var ck = CKEDITOR.replace('editor1').on('change', function(e) {
    if (document.activeElement.nodeName == "IFRAME") {
        var thisHTML = e.editor.getData();
        var tempDiv = $('<div>').html(thisHTML);
        thisText = tempDiv.text();
        note(thisText);  
    }
  });

  function note(value){
   var data = {'text':value};
   var urlAjx = "brouillon.php";
   
   //le temps des tests
   console.log(" Note = " + value );
   
   //envoie de l'ajax
   $.ajax({
       async : false,
       type: "POST",
       url: urlAjx,
       data: data,
       dataType: 'json',
       success: function(reponse) {
         //console.log(reponse);
         $("#infosMsg").val(reponse.resultat);
       },
        error: function(xhr, status, error) {
          var err = eval("(" + xhr.responseText + ")");
          alert(err.Message);
        }      
   });
  }
  </script>
 </body>
</html>

Et pour le PHP :

<?php
//affichage des erreurs php
error_reporting(E_ALL);


$result = array(); //variable de retour à la fin du script

//Recuperation "propre" des variables
$text = isset($_POST['text']) ? $_POST['text'] : '';

//     -----   /!\ -------
//Variables à modifier avec tes infos
$bddName = "mabdd";
$user = "root";
$pwd = "";

//Connexion à la BDD
try{
  $bdd = new PDO('mysql:host=localhost;dbname='.$bddName.';charset=utf8', $user, $pwd);
  $bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  $bdd->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
} catch(PDOException $e) {
   $result['erreur'][] = 'Erreur : ' . $e->getMessage();
}

 $sql = 'UPDATE test set message= :txt';
 $datas = array(":txt"=>$text);
 if($bdd){ 
  try{
   $req = $bdd->prepare($sql);
   $req->execute($datas);
   $result['resultat'] = 'Brouillon enregistré '.date(' h:i:s A');
  }catch(Exception $a){
    $result['erreur'][] = "Erreur ! ".$e->getMessage();
    $result['resultat'] =  "L'insertion a échouée" ;
    $result['erreur'][] = $_POST;
  }  
}else{
   $result['erreur'][] = "Probleme de connexion à la BDD :".$bddName;
}
  //On renvoie le resultat en json
  echo json_encode($result);

?>

NB : Tu penseras à aller modifier tes Variables avec tes infos de connexion à la BDD

Ensuite...
[]

ATTENTION : Tu dois absolument avoir tes fichier php encodés en UTF8 ainsi que ta BDD.

Va voir ici : https://forums.commentcamarche.net/forum/affich-37584944-php-html-caracteres-accentues-et-l-utf8

Cordialement,
Jordane

sevs

merci beaucoup,
Mais j'avais fait ainsi au final. Désolé je viens de voir ton post

  <script>
        $(document).ready(function(){
            function brouillon(){
                var monTexte = $('#editor1').val();
                $.ajax({
                    method: "POST",
                    url: "brouillon.php",
                    data: {msg:monTexte},
                    success: function(data){
                        $('.result').html(data);
                    }
                });
            };
            setInterval(function(){
                brouillon();
            }, 10000);
        });
        </script>

par contre, je me demande comment adapter ton script pour ckeditor afin qu'il soit compatible. Car ici, il ne l'est pas et je suis obligé d'enlever l'éditeur

sevs

résolu de chez résolu
Merci jordane de ton aide
0

douarfyduck Messages postés 85 Date d'inscription Statut Membre Dernière intervention 24

Une requête AJAX est une requête classique http, elle est juste exécute de manière asynchrone. Vous pouvez envoyer des paramètres via AJAX comme ceci :

 
$.ajax({
        type: $(this).attr("method"), // POST OU GET
        url: $(this).attr("action"), // URL A APPELER
        data: $(this).serialize(), //PARAMETRES 
        success: OnSuccess // CALLBACK
    });.

Pour récupérer la valeur en php, il suffit de procéder normalement.

sevs

Merci doua de ta réponse.
Mais comment modifier ceci afin que tout soit automatiser.
J'ai lu sur internet qu'il était possible de faire des copies d'un message que nous sommes en train de taper avec ajax.

<script text="javascript">

function timer()
{
comp=(setTimeout("go()",5000));
}

function getXhr(){
                var xhr = null; 
            if(window.XMLHttpRequest) // Firefox et autres
               xhr = new XMLHttpRequest("post","",true); 
            else if(window.ActiveXObject){ // Internet Explorer 
               try {
                         xhr = new ActiveXObject("Msxml2.XMLHTTP");
                     } catch (e) {
                         xhr = new ActiveXObject("Microsoft.XMLHTTP");
                     }
            }
            else { // XMLHttpRequest non supporté par le navigateur 
               alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
               xhr = false; 
            } 
                                return xhr
         }

function go()
{
   var xhr = getXhr()
   // On défini ce qu'on va faire quand on aura la réponse
   xhr.onreadystatechange = function()
      {
         // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
            if(xhr.readyState == 4 && xhr.status == 200)
               {
               
                  var html = xhr.responseText;
                  document.getElementById('cible').innerHTML = html;
                  
               }
      }
	  
   xhr.open("POST","brouillon",true);
   xhr.send(null);
   setTimeout('go()',5000);
}
</script>

Merci à toi

douarfyduck Messages postés 85 Date d'inscription Statut Membre Dernière intervention 24

Avec JQUERY et AJAX :


<textarea id="area></textarea>
<script text="javascript">
$(document).ready(function(){
  $("#area").on("keypress",function(){
    //Requete AJAX
  })

})
</script>

sevs

Merci de ton bout de code. Mais étant donnée que je suis une jeune codeuse en ajax, je ne comprends pas quel fonction je peut mettre pour automatisé l'enregistrement à intervalle régulier et reprendre le tout pour l'enregistrer dans ma base de donnée. Etant donné qu'il n'appelle meme plus mon script php je ne vois plus l'écho que j'ai fait
0

Réponse 3 / 4
jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830
Bonjour,

quel fonction je peut mettre pour automatisé l'enregistrement à intervalle régulier

Si par "interval régulier" tu veux dire : au fur et à mesure que l'utilisateur saisi.... tu peux alors utiliser le onkeyUp ou onKeyPress sur ton textarea
https://html.com/attributes/textarea-onkeypress/

Sinon, si tu veux vraiment le faire à interval régulier.. en javascript il existe les fonctions settimeout et setInterval

Par contre, tu as oublié d'envoyer les données à ton script php (il faut mettre les variables lors du SEND
```
 xhr.send(tesparams);
```
- tesparams pouvant être de la forme :
```
var text = document.getElementById('id_de_ton_textarea').value;
var tesparams = "nomdelavariablequetuveux="+text ;
```
après... comme le sugère douarfyduck .. il est préférable d'utiliser l'ajax en JQUERY
Voici un exemple complet : https://forums.commentcamarche.net/forum/affich-33258760-remplir-un-formulaire-dynamiquement-en-fonction-d-une-combobox#2
0
1. sevs
  
  Bonsoir Jordane45;
  Tout d'abord merci de tout tes conseils. Ta fonction onkeypress m'interesse donc je me suis renseigner http://stackoverflow.com/questions/33944951/save-content-of-textarea- C'est comme ici? Ou je pars vraiment sur de très mauvaises bases en suivant ce tuto
  
  0
  1. jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830 > sevs
    
    Oui c'est pas trop mal.
    Comme tu peux le voir ça utilise JQUERY et la méthode AJAX
    
    0
  2. sevs > jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention
    
    Merci, j'essaye de faire cela; et je reviens vers vous si j'ai le moindre soucis ou si cela est réglé.
    Merci en tout cas de m'avoir aiguillé. C'est compliqué, mais vous me simplifiez les choses :)
    
    0
2. sevs
  
  http://stackoverflow.com/questions/33944951/save-content-of-textarea-onkeypress-with-ajax
  
  désolé
  
  0

sevs

Je continue à nager...
Là être honnête ce n'est plus nager mais c'est comme être en train de me noyée...
Je ne comprends pas où est mon erreur. Je maîtrise parfaitement le php, et je reconnais que j'ai du mal avec le js
Le code sur la page html

<html>
    <head>
        <meta charset="utf-8">
        <title>news</title>
		    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
        <!-- Make sure the path to CKEditor is correct. -->
        <script src="ckeditor.js"></script>
		
    </head>
    <body onload='timer()'>
       <form action="Mail3" method="POST">
            <textarea name="editor1" id="editor1" rows="10" cols="80" >
                Saissisez votre message ici
            </textarea>
            <script>
              
                CKEDITOR.replace( 'editor1' );
            </script>
			<script text="javascript">
             $(document).ready(function()
			 $("#editor1").bind("keypress", function() {
        note(this.value)
   });

   function note(value) {
       $.ajax({
           async : false,
           type: "POST",
           url: "./brouillon.php",
           data: {
             'text'  : value
           },
           success: function(data) {
             $("#editor1").html(html);
           }
       });
   }</script>
			<input type="submit" name="soumettre" value="envoyer">
        </form>
		
    </body>
</html>

Encore en page de teste, car à la base, je voulais faire les sauvegardes avant de la mettre en ligne

et celui sur la page de traitement que j'ai nommée brouillon

<?php
header('Content-type: application/json; charset=utf-8');

 function note() {
   $bdd = new PDO('mysql:host=localhost;dbname="";charset=utf8', '', '');
   $req = $bdd->prepare('UPDATE test set message= ?');
   $req->execute(array($_GET['text']));
   
  if($requete)
  {
    echo('Brouillon enregistré'.date(' h:i:s A').'') ;
  }
  else
  {
    echo("L'insertion à échouée") ;
  }


?>

D'habitude je fais une inclusion de mes données de connexion, je remettrais tout cela correctement quand j'aurais bien compris l'astuce.
Etre franche je ne veux pas de code tout fait; sinon je n'apprendrais pas. Juste un aiguillage de mes erreurs
Merci de tout le temps que vous m'accordez

jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830

Dans ton javascript Ajax -> POST
dans ton php $_GET
... normal que ça ne marche pas
0
sevs > jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention

Idiote je suis.... Je l'ai changé dans l'un mais pas dans l'autre. Sinon le code te semble correcte?Car cela ne fonctionne toujours pas...
0

jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830

<?php
//affichage des erreurs php
error_reporting(E_ALL);


$result = array(); //variable de retour à la fin du script

//récupération "propre" des variables
$text = isset($_POST['text']) ? $_POST['text'] : '';

//Connexion à la BDD
try{
  $bdd = new PDO('mysql:host=localhost;dbname="";charset=utf8', '', '');
  $bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  $bdd->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_OBJ);
} catch(PDOException $e) {
   $result['erreur'][] = 'Erreur : ' . $e->getMessage();
}

 $sql = 'UPDATE test set message= :txt';
 $datas = array(":txt"=>$text);
  
  try{
   $req = $bdd->prepare($sql);
   $req->execute($datas);
  }catch(Exception $a){
    $result['erreur'][] = "Erreur ! ".$e->getMessage();
  }  
   
 
   
  if($requete) {
    $result['resultat'] = 'Brouillon enregistré '.date(' h:i:s A');
  } else {
    $result['resultat'] =  "L'insertion à échouée" ;
  }

  //On renvoie le resultat en json
  echo json_encode($result);

?>

sevs > jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention

Merci pour le code, mais je vais faire d'une autre façon, enfin essayer parce que cela refuse d'enregistrer.
Merci quand même de tout le temps accordé :)
0
sevs

j'ai un soucis sur cette ligne $("#editor1").on("keypress", function() {
0

Ajax: comment faire?

4 réponses

ATTENTION : Tu dois absolument avoir tes fichier php encodés en UTF8 ainsi que ta BDD.

Discussions similaires

Newsletters