Je souhaite soumettre des données via ajax à la base de données et après avoir inséré des données dans la base de données, ces données doivent être affichées dynamiquement sur le fichier Demo.html au dernier, c'est-à-dire après div dans mon cas.

Bien stocker des données via ajax, je l'ai fait, mais je ne sais pas comment afficher ces données nouvellement insérées dans Demo.html . Alors, guidez-moi comment y parvenir.

Voici mon code.

AjaxFile.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body >

<p><span id="get">Ajax response comes here</span></p>
<div id="divId">
    <input type="text" name="i1" value=""  /><br />
    <input type="text" name="i2" value=""  /><br />
    <button onclick="ajaxFunction()">Click </button>
</div>

<script src="jquery-3.2.1.min.js" ></script>
<script type="text/javascript">

function ajaxFunction() {
    $(function(){
        var myData1 = $("input[name='i1']").val();
        var myData2 = $("input[name='i2']").val();

        $.ajax({
            type : "post",
            dataType : "text",
            url : "controller.php",
            data : { data1 : myData1, data2 : myData2}, 
            success : function(msg){
                document.getElementById('get').innerHTML = msg;

            }
        });
    });
}

</script>
</body>
</html>

controller.php

<?php

session_start();

$servername = "localhost";
$username = "root";
$password = "";
$databaseName = "mydb1";

 try {

  $conn = new PDO("mysql:host = $servername; dbname = $databaseName", $username, $password);
  // set the PDO error mode to exception
  $conn->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);

   $conn->exec("use mydb1");

  if($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['data1']) && isset($_POST['data2'])) {

      $data1 = $_POST['data1'];
      $data2 = $_POST['data2'];

      $statement = $conn->prepare("Insert into mytable (data1, data2) values (:data1 , :data2)");

      if( $statement->execute(array("data1"=>"$data1", "data2"=>"$data2")) ) {

        echo "successfully inserted";
        // want to display $data1 and $data2 at the last in Demo.html just after inserting.


    } else {
      echo "Not successfully inserted";
    }
} else {

     echo "something is not set";
}

}catch(PDOException $e) {
echo "connection failed ". $e->getMessage();
}

$conn = null;
?>

Démo.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
    body {
        margin : 0;
    }
    #first {
        width : 100%;
        height : 100px;
        margin : 30px auto auto auto;
        border : 1px dashed black;
    }
</style>
</head>
<body>

<div id="first" align="center"> I want to display newly inserted data below this div</div>

</body>
</html>
1
learner 10 août 2017 à 18:59

2 réponses

Meilleure réponse

Il est basé sur la réponse de @Nikhil Nanjappa.

Vous pouvez utiliser un tableau pour stocker plus d'éléments dans localStorage. Stocker l'objet dans localStorage.

AjaxFile.html

success: function(msg) {
  document.getElementById('get').innerHTML = msg;

  StoredData = JSON.parse(localStorage.getItem("StoredData"));
  if(!StoredData) StoredData = [];
  StoredData.push(myData1);
  StoredData.push(myData2);
  localStorage.setItem("StoredData", JSON.stringify(StoredData));

  window.location.href = 'Demo.html'
}

Demo.html (en bas du corps)

<script type="text/javascript">
  StoredData = JSON.parse(localStorage.getItem("StoredData"));
  StoredData.reverse().forEach( function(data) {
    $('#first').after('<div>data = ' + data +'</div>')
  });
</script>
0
yellowmint 18 août 2017 à 16:11

Après l'insertion dans la base de données, utilisez la fonction file () pour enregistrer dans le fichier avec la sous-fonction append, qui écrit une nouvelle ligne dans votre fichier, et le fichier lu dans demo.html -

Dans votre contrôleur php, utilisez le fichier de fonction pour enregistrer en mode ajout une chaîne à votre fichier. regardez ici: http://php.net/manual/en/function .file-put-contents.php

Et après cet appel ajax pour obtenir par exemple read.php à l'intérieur de php, utilisez file () de php pour lire ce fichier ce que vous avez écrit auparavant.

1
CommanderSpock 10 août 2017 à 16:54