Ajax: comment faire?

Résolu/Fermé

sevs - 23 nov. 2016 à 15:13
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?

A voir également:

Yggtorrent erreur ajax
Yggtorrent - Accueil - Outils
Erreur 0x80070643 - Accueil - Windows
YggTorrent passe en privé : le site pirate veut échapper à la justice - Accueil - Services en ligne
Erreur 0x80070643 Windows 10 : comment résoudre le problème de la mise à jour KB5001716 - Accueil - Windows
Erreur 1001 outlook - Accueil - Bureautique

4 réponses

Réponse 1 / 4

jordane45 Messages postés 38288 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 novembre 2024 4 703
Modifié par jordane45 le 24/11/2016 à 18:10

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
Modifié par sevs le 24/11/2016 à 19:52

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
24 nov. 2016 à 21:03

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

Réponse 2 / 4

douarfyduck Messages postés 85 Date d'inscription mercredi 25 février 2015 Statut Membre Dernière intervention 21 août 2018 24
23 nov. 2016 à 15: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
23 nov. 2016 à 15:43

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 mercredi 25 février 2015 Statut Membre Dernière intervention 21 août 2018 24
Modifié par douarfyduck le 23/11/2016 à 16:06

Avec JQUERY et AJAX :


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

})
</script>

sevs
23 nov. 2016 à 17:34

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

Réponse 3 / 4

jordane45 Messages postés 38288 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 novembre 2024 4 703
23 nov. 2016 à 19:41

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

sevs
23 nov. 2016 à 20:32

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

jordane45 Messages postés 38288 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 novembre 2024 4 703 > sevs
23 nov. 2016 à 22:13

Oui c'est pas trop mal.
Comme tu peux le voir ça utilise JQUERY et la méthode AJAX

sevs > jordane45 Messages postés 38288 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 novembre 2024
24 nov. 2016 à 08:08

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 :)

sevs
23 nov. 2016 à 20:36

http://stackoverflow.com/questions/33944951/save-content-of-textarea-onkeypress-with-ajax

désolé

Réponse 4 / 4

sevs
24 nov. 2016 à 09:00

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 38288 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 novembre 2024 4 703
24 nov. 2016 à 09:02

Dans ton javascript Ajax -> POST
dans ton php $_GET
... normal que ça ne marche pas

sevs > jordane45 Messages postés 38288 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 novembre 2024
Modifié par sevs le 24/11/2016 à 09:16

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...

jordane45 Messages postés 38288 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 novembre 2024 4 703
Modifié par jordane45 le 24/11/2016 à 13:02

<?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 38288 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 novembre 2024
24 nov. 2016 à 12:04

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é :)

sevs
24 nov. 2016 à 12:46

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

Discussions similaires

Instagram "Désolé, une erreur s'est produite"

Erreur de lecture sur iptv smarters

Erreur vidéo inconnue sur le Freebox Player

Free erreur 38 : impossible d'envoyer des SMS

Code erreur 3000