JSON AJAX Post 403 forbidden error.

Résolu
yacinebosss -  
bonjour a tous.
j'ai un soucis avec mon code. qui consiste a envoyé un ARRAY depuis mon code php. vers javascript en utilisant AJAX (que je ne mettrise pas du tout).
voici mon code php: 


$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT nom, age, le_commentaire FROM commentaire";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
  // output data of each row

$data = array('nom' => $row[nom],'age' => $row[age],'le_commentaire' => $row[le_commentaire] );                  

    echo json_encode($data); /*ces ca le plus important car le reste marche. ces la fonction qui envoie les donné je crois.*/
  
} else {
  echo "0 results";
}
$conn->close();


mon code js: 



$.ajax({
    url: "<?php echo site_url('test.php'); ?>",
    type: 'POST',
    
    dataType:'json', 
    success: function(data) {
        alert(data[0]); // alerts first string
    },
    
});



le but de mon code. c'est de récupéré les information depuis ma base de donné (serveur local)et de les publié sur ma page.

ET LE MESSAGE DERREUR EST : 

jquery-3.5.1.js:2 POST http://localhost/%3C?php%20echo%20site_url(%27test.php%27);%20?%3E 403 (Forbidden)


merci beaucoup. :)

13 réponses

Résumé de la discussion

L'envoi d'un tableau depuis PHP vers JavaScript via AJAX et l'obtention de données JSON depuis une base MySQL est au cœur des échanges. Le cœur du problème vient du code PHP/MYSQL qui encode les données en JSON et de l'appel AJAX, mais une erreur 403 Forbidden apparaît à cause d'une URL mal formée dans le script. Des réponses suggèrent d'envoyer des données au format JSON depuis PHP, d'ajouter l'en-tête approprié et de corriger l'URL de l'appel AJAX, puis de tester en séparant les scripts dans des fichiers distincts. Par ailleurs, d'autres conseils recommandent de séparer le code JavaScript du code PHP et d'utiliser une boucle pour renvoyer l'ensemble des lignes sous forme de tableau.

Bobot (l’IA à votre service)
  2. yacinebosss Auteur
    ca a maaaaarchhhhhééééé.

    j'avait oublié de crée la variable row.
    0
    1. jordane45 Modérateur
      Niquel
      Tu penseras à mettre le sujet en résolu
      Bonne soirée
      0
  3. yacinebosss Auteur
    bon ok j'ai bien fait chauffé mon cevreau (je suis nouveau dans php hhh) et jai trouvé les erreur

    Warning: Use of undefined constant nom - assumed 'nom' (this will throw an Error in a future version of PHP) in C:\xampp\htdocs\test.php on line 51

    Notice: Undefined variable: row in C:\xampp\htdocs\test.php on line 51

    Notice: Trying to access array offset on value of type null in C:\xampp\htdocs\test.php on line 51

    Warning: Use of undefined constant age - assumed 'age' (this will throw an Error in a future version of PHP) in C:\xampp\htdocs\test.php on line 51

    Notice: Undefined variable: row in C:\xampp\htdocs\test.php on line 51

    Notice: Trying to access array offset on value of type null in C:\xampp\htdocs\test.php on line 51

    Warning: Use of undefined constant le_commentaire - assumed 'le_commentaire' (this will throw an Error in a future version of PHP) in C:\xampp\htdocs\test.php on line 51

    Notice: Undefined variable: row in C:\xampp\htdocs\test.php on line 51

    Notice: Trying to access array offset on value of type null in C:\xampp\htdocs\test.php on line 51

    Notice: Array to string conversion in C:\xampp\htdocs\test.php on line 52
    Array{"nom":null,"age":null,"le_commentaire":null}
    0
    1. yacinebosss Auteur
      je crois avoir compris ou est l'erreur ces au moment de l'envois.
      esceque la facon donc jai crée le ARRAY est juste ?
      en gros j'ai pris la primére ligne de ma colonne de la basse de donné.( pour testé aprés je vais ajouté un boucle ) 

      $data = array('nom' => $row[nom],'age' => $row[age],'le_commentaire' => $row[le_commentaire] );                  
    
    echo json_encode($data);
      0
      2. yacinebosss Auteur
        bon ok,
        j'ai essayer de comprendre.
        ces pas une erreur ces ecris ereur ajax car il ya 
        console.log("ereur ajax")


        mais ca veux dire qu'il n'a aplliquer le code 
        success success: function(data) {
             alert(data[0]); 
          }


        pouquoi ? il est ou le probléme.
        0
        1. yacinebosss Auteur
          en faite ca marche maintenant j'ai corrigé l' url.

          mais reste cette erreur:
          "Erreur Ajax {readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}"

          je ne sais pas du tout ces quoi je vais cherché, si tu connais aide moi
          0
          1. jordane45 Modérateur
            Tu dois afficher des choses dans ton code php...
            Et vu que ton script attend du json il te met une erreur
            0
          2. yacinebosss Auteur
            @jordane45je ne cherche affiché dans mon code php.
            je veux envoyé une variable en l'occurence un ARRAY dans mon code javascript. sous forme de tableau si ces possible.

            mais apparment ces sous forme json.
            0
          3. yacinebosss Auteur
            @jordane45et j'ai cherché sur le json aparament il est pas vraiment "definit" donc on peu lui donné la valeur qu'on veux.
            0
        2. yacinebosss Auteur
          non j'ai tester plusieur methode le url: urlajax ..... et ca me fait le meme resultat.

          j'ai vu dans tuto comment les placer pour optimisé ca page.
          t sure car ca ne ma jamais posé de probléme.
          0
          1. jordane45 Modérateur

            j'ai vu dans tuto comment les placer pour optimisé ca page

            Ben change de tuto alors...
            Car de cette façon.. la page html n'est pas "valide".
            Ca peut marcher.. mais ce n'est pas bon.

            Et oui.. j'en suis sûr.

            Pour en revenir à ton url...
            Ton code html .. il est dans un fichier qui se nomme comment ?
            Ton fichier php, il se trouve dans quel répertoire par rapport à ton script html ?
            0
        3. yacinebosss Auteur
          bien sure tous est séparer .

          mon code js: 
          //script
//*********************************************************
//declaration des variable  
    var nav;
    var navdesign= document.createElement("div");
    var fixeddesign=0;
 //////////////////////////////////////////////////////   

    var nav1= document.getElementById("nav1");
    var nav2= document.getElementById("nav2");
    var nav3= document.getElementById("nav3");
    var nav4= document.getElementById("nav4");

    nav1.onmouseover = function(){
        designover(nav1);
    }
    nav2.onmouseover = function(){
        designover(nav2);
    }
    nav3.onmouseover = function(){
        designover(nav3);
    }
    nav4.onmouseover = function(){
        designover(nav4);
    }

    nav1.onmouseout = function(){
        designout(nav1);
    }
    nav2.onmouseout = function(){
        designout(nav2);
    }
    nav3.onmouseout = function(){
        designout(nav3);
    }
    nav4.onmouseout = function(){
        designout(nav4);
    }

    nav1.onclick = function(){
        designclick(nav1);
    }
    nav2.onclick = function(){
        designclick(nav2);
    }
    nav3.onclick = function(){
        designclick(nav3);
    }
    nav4.onclick = function(){
        designclick(nav4);
    }


// céation du div design
    function designover(nav){
    nav.appendChild(navdesign);
    navdesign.style.position="relative";
    navdesign.style.height=7 +"px";
    navdesign.style.width=100 +"%";
    navdesign.style.background="rgba(0,186,255,0.5)";
    navdesign.style.bottom= 29.9 +"px";
    navdesign.style.borderBottomRightRadius= 100 +"%";
    navdesign.style.borderBottomLeftRadius= 100 +"%";}
////////////////////////////////////////////////////////
//suppression du div 
   function designout(nav){nav.removeChild(navdesign);}
 ///////////////////////////////////////////////////////      
//pour appareil tactile    
    function designclick(nav){
    fixeddesign=1;
    nav.appendChild(navdesign);
    navdesign.style.position="relative";
    navdesign.style.height=7 +"px";
    navdesign.style.width=100 +"%";
    navdesign.style.background="rgba(0,186,255,3)";
    navdesign.style.bottom= 29.9 +"px";
    navdesign.style.borderBottomRightRadius= 100 +"%";
    navdesign.style.borderBottomLeftRadius= 100 +"%";

    }
   //*******************************************************
   //barre de navigaion intelligente
   var body= document.getElementById("body");
    document.onscroll= function(){
    var a = body.scrollTop;
    var cible = document.getElementById("nav");
    
    if(a >= 101){
      cible.style.position= "fixed";
      cible.style.top= 0;
    } 
    else{
      cible.style.position= "static";
     }
    }
    //*******************************************************
    //design click lien reseau sociaux
    function clickdesign(cible){
    cible.style.background="black";
    cible.style.opacity= 60 + "%";
    }
    //*******************************************************
    
    document.onscroll= function() {
        
        var element= document.getElementById("body");
        var scrollUp= document.createElement("div");
        element.appendChild(scrollUp);
        var a = body.scrollTop;
        
        scrollUp.style.borderRadius= 50+"%";
        scrollUp.style.background= "black";
        scrollUp.style.position="fixed";
        scrollUp.style.top=78+"%";
        scrollUp.style.left=88+"%";
        scrollUp.style.width=70+"px";
        scrollUp.style.height=70+"px";

      if(a >= 400){
        console.log("ok");
        //scrollUp.style.opacity=100 +"%";
        scrollUp.style.visibility= "visible";
    } 
    else{
      //scrollUp.style.opacity=0 +"%";
      console.log("non");
      scrollUp.style.visibility= "hidden";
     }
  

    }  


    //******************************************************************





     /*$.ajax({
  type: 'POST',
  dataType: "json",
  url:'test.php',
  
  success: function(data)
  {
   try {
      data = JSON.parse(data);
      console.log(data);
    }catch(e) {}
    console.log(data);
  }
});*/

  $.ajax({
   url: ("test.php"),
   type: 'POST',
   dataType:'json',
   success: function(data) {
     alert(data[0]); // alerts first string
  },error: function(err){
      console.log('Erreur Ajax',err);
     alert("erreur ajax");
  }

});



      var vcomm;
     var commentaire;   
     vcomm = document.getElementById("VOS COMMENTAIRE");

    

        onload=function addcomm(){
            
            console.log("ajout");
            commentaire = document.createElement('p')
            vcomm.appendChild(commentaire);
            
            commentaire.innerHTML="commentaire";
        }


          mon code html: 
          <!DOCTYPE html>


<html id="body" lang='en' >
<head>
    <meta charset="UTF-8" /> 
    <title>
        Le babezien
    </title>
    
    <link rel="stylesheet" href="design.css" >

    <link rel="shortcut icon" href="babezien2.png">    

    

 

<body >
<header style="background-image: url('usthb.jpg');"> 
      
<center>
       <img id="icone" src="le babezien.jpg">
    </center>
</header>

<nav id="nav" >
 
  <a href="" class="navchoice" id="nav1"><b>ACCUEIL</b> </a>
  <a href="" class="navchoice" id="nav2"><b>NOS ARTICLE</b></a>
  <a href="" class="navchoice" id="nav3"><b>CONTACT</b></a>
  <a href="" class="navchoice" id="nav4"><b>INFO</b></a>

</nav>
<article > 
<center>

  
    <div class="presontArt">
        <p class="gauche"> Edition N°1 <b>Le Babezien</b> </p>
    <p class="droite">21/12/2019 <img id="timeArt"  src="time.jpg"> </p></div>
    <img class="firstimg" class="ilsr" src="3.jpg">
    <img class="ilsr" src="4.jpg">
    <img class="ilsr" src="5.jpg">
    <img class="ilsr" class="lastimg" src="6.jpg">
    <div class="presontArt" >
       </center> 
       <a href="" style="margin-left:10px;margin-right: 80%;background-color: rgba(90,90,90);color: white;text-decoration: none; ">telecharger le pdf </a> 
    
    </div>
    <p style="display: flex;background:rgba(1,1,1,0.2);margin-right: 67%;border-radius: 20px;margin-left: 5px; " ">AJOUTER UN COMMENTAIRE:</p>
    
    <div class="encadrageCommentaire">      

      <form  action="test.php" method="post">

       <div class="commentaire"> <p >nom:                </p><input  type="texte" name="nom"></div>
       <div class="commentaire"><p>age:                  </p><input type="texte" name="age"></div>
       <div class="commentaire"><p>commentaire:   </p><input style="min-height: 70px;" type="texte" name="le_commentaire"></div>
        <input style="background:rgba(1,1,1,0.2);width: 12%;margin-left: 85%; border-radius:0 0 5px 0;" type="submit" name="valider">
        
      </form>
    </div>
    
    <div id="VOS COMMENTAIRE" class="encadrageCommentaire">
      <p>
        
      </p>

    </div>

    
</article>

<aside>
    	
    	
	</aside>

 <footer >
  <div class="LigneHonrizontalFooter" ></div>
  <div style="display: flex;padding-top: 10px;justify-content: center; border-height:40px; ">
      <p><b>SUIVEZ Le Babezien</b></p>
    <a onclick="clickdesign(this)" href="https://www.facebook.com/Le-babezien-104889507687360/?__tn__=%2Cd%2CP-R&eid=ARC0wVBmgp6HR37Lc_GMHCaHVkq8l3GSztM-1JFCEA9yPn8KDTcS6ikhW4si7-1a1Cdr-B1slTl1QQpV"><img src="footer-icon-facebook.png"><p> facebook</p></a> 
    <a onclick="clickdesign(this)"><img src="footer-icon-youtube.png"><p> youtube</p></a>     
    <a onclick="clickdesign(this)"><img src="footer-icon-instagram.png"><p> instagram</p></a>   
    </div>
</footer>



</body>
<script type="text/javascript">
var urlAjx = "<?php echo site_url('test.php'); ?>";
</script>
<script type="text/javascript" src="jquery-3.5.1.js"></script>
 <script src="le babezien.js"></script>



</html>
          0
          1. jordane45 Modérateur
            il ne faut pas de parenthèse 
             url: ("test.php"),


            en plus, pourquoi ne pas utiliser la variable urlAjx ?

            evite également de mettre des espaces ( ni de caractères accentués ou spéciaux (juste au cas où je préfère prévenir ) dans le nom de tes fichier (ou de tes dossiers) 
             <script src="le babezien.js"></script>

            A renommer, par exemple en 
             <script src="le_babezien.js"></script>

            ( et renommer le fichier également bien entendu)
            0
          2. jordane45 Modérateur
            @jordane45Ah, et les includes de script JS . ... ça se place AVANT le </body> pas en dessous !
            0
        4. yacinebosss Auteur
          voila la ca marche mais ca me fait le coup du 403.
          et me revois l'erreur.

          0
          1. jordane45 Modérateur
            Tu ne dois pas mettre de code PHP dans un fichier .js !!!

            Tu as appliqué la correction que je t'avais donnée à ce sujet ??

            IL serait, même si tu le trouves long..., de nous montrer ton code HTML COMPLET
            Ainsi que ton code JS complet également.
            0
        5. yacinebosss Auteur
          ahh wé moi je croyais que c'est comme js.

          je le connecté pour ajouter et je le déconnecté.

          et je fesait la meme chose pour SELECT.

          "A croire que tu as voulu "coller" un script qui était utilisé via un "submit" php dans un script ajax en pensant que ça marcherait pareil..."

          EXACTEMENT,
          le code php qui gère l'ajout marche bien MRC DE M'AVOIR, montré cette erreur.

          mais quel solution tu me préconise pour la recupération des donné (meme un autre truc que ajax)?
          0
          1. jordane45 Modérateur
            Pour commencer, vu ce que je t'ai écrit juste avant ... commence par séparer tes deux scripts dans deux fichiers différents.
            Puis reteste .. et reviens nous voir avec les éventuelles erreurs constatées et le code concerné.
            0
        6. yacinebosss Auteur
          OK le code html il est assez long. mais moi j'ai un div ou je vais mettre cette information.
          mais je ne sais pas comment faire. j'ai remarqué qu'il utilise le POST donc je dois utilisé POST pour recupérer ?

          mon code php: 
          <?php

 //insert data

$servername = "localhost";
$[https://www.commentcamarche.net/contents/1347-wsh-objet-wshnetwork username] = "**********";
$password = "";
$dbname = "**********";

 $nom = $_POST["nom"];
 $age = $_POST["age"];
 $le_commentaire = $_POST["le_commentaire"];

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

$sql = "INSERT INTO commentaire(nom,age,le_commentaire)
 VALUES ('$nom', '$age','$le_commentaire')";


if (mysqli_query($conn, $sql)) {
  // output data of each row
   header('Location: http://localhost/index.html');
} else {
  echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}

$conn->close();

//************************************************************************

  //SELECT DATA

$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT nom, age, le_commentaire FROM commentaire";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
  // output data of each row
  
    
   $data = array('nom' => $row[nom],'age' => $row[age],'le_commentaire' => $row[le_commentaire] );                  

    echo json_encode($data);
  
} else {
  echo "0 results";
}
$conn->close();


?>


          mon code js il est encore assez long je let la partie responsable de cette action: 
          $.ajax({
   url: urlAjx,
   type: 'POST',
   dataType:'json',
   success: function(data) {
     alert(data[0]); // alerts first string
  },error: function(err){
      console.log('Erreur Ajax',err);
     alert("erreur ajax");
  }

});



      var vcomm;
     var commentaire;   
     vcomm = document.getElementById("VOS COMMENTAIRE");

    

        onload=function addcomm(){
            
            console.log("ajout");
            commentaire = document.createElement('p')
            vcomm.appendChild(commentaire);
            
            commentaire.innerHTML="commentaire"; /* la j'ai envie dajouter mes donné stoker dans l'ARRAY.*/
        }
          0
          1. jordane45 Modérateur
            Oulaaa..... je ne comprend pas...
            J'ai l'impression que tu as DEUX codes différents ...dans ton script php
            Un pour l'ajout ...
            et un pour la recherche ...

            Tu ne peux pas !
            Surtout que celui pour l'ajout... il essaye de faire une redirection .... mais vu que c'est de l'ajax.. ça ne marchera pas !

            Si tu veux gérer en ajax l'ajout .. tu places le code de l'ajout dans un fichier
            Et pour l'affichage des commentaires en ajax.. tu utilises un autre fichier

            Sinon... comment penses tu que ton code sache dans quel cas tu te trouves ?

            Surtout qu'en plus.. après l'ajout tu essaies de faire une redirection...... mais vu que tu appelles le script en ajax..ça ne risque pas de marcher.

            A croire que tu as voulu "coller" un script qui était utilisé via un "submit" php dans un script ajax en pensant que ça marcherait pareil...

            Tu devrais regarder ces exemples
            https://codes-sources.commentcamarche.net/source/102253-exemple-ajax-en-jquery
            0
        7. yacinebosss Auteur
          J'ai fait comment ca mais rien ne s'affiche dans la console.

          En plus j'ai pas compris un truc. comment je peux récupérer l'ARRAY dans mon code js pour l'ajouté dans ma page hmtl.
          0
          1. jordane45 Modérateur
            Rien ne s'affice

            Déjà, il faudrait que tu nous montres ton code complet
            - Le script html
            - Le script php appelé par ton ajax

            NB : Pour poster ton code sur le forum, merci d'utiliser (correctement;..) les balises de code
            Explications ( à lire ENTIEREMENT ) disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
            0
        8. jordane45 Modérateur
          Bonjour,
          Ton code JS ... il se trouve où ?
          Si c'est dans un fichier .js ... ou un fichier .html ... ton code PHP ne peut pas être "traduit" ...

          0
          1. yacinebosss Auteur
            Oui il est dans un fichier .js
            Où je dois le mettre alors? Car j'ai suivi les info des forum.
            0
          2. jordane45 Modérateur
            @yacinebosssTu peux laisser le script ajax dans un fichier .js
            Mais il faut :
            - Le modifier comme ceci : 
            $.ajax({
   url: urlAjx,
   type: 'POST',
   dataType:'json',
   success: function(data) {
     alert(data[0]); // alerts first string
  },error: function(err){
      console.log('Erreur Ajax',err);
     alert("erreur ajax');
  }

});

            et dans le code html/php où tu fais appel à ton fichier js,
            il faut placer des balises script 
            <script type="text/javascript">
var urlAjx = "<?php echo site_url('test.php'); ?>";
</script>

<!-- Puis ton include de ton fichier .js -->
<script src="chemin/vers/tonfichier.js"></script>
            0

        Discussions similaires

        E 403 après paiement
        Marie

        6 réponses
        comment supprimer erreur 403
        boin

        2 réponses
        Comment résoudre une erreur HTTP 403 ?
        steph67

        49 réponses
        Post it sur le bureau (Mac)
        Romaneldrn

        9 réponses
        java script error in the main process
        ceciel2307

        3 réponses