Actualiza dinámicamente una página a través de ajax y php

Quiero enviar datos a través de ajax a la base de datos y luego de insertar los datos en la base de datos, estos datos deben mostrarse en el archivo Demo.html dinámicamente al último, es decir, después de div en mi caso.

Bueno, he almacenado datos a través de ajax, pero no sé cómo mostrar estos datos recién insertados en Demo.html . Así que guíenme cómo lograr esto.

A continuación está mi código.

AjaxFile.html

      

Ajax response comes here



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; } }); }); }

controller.php

 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; ?> 

Demo.html

      body { margin : 0; } #first { width : 100%; height : 100px; margin : 30px auto auto auto; border : 1px dashed black; }    
I want to display newly inserted data below this div

Está basado en la respuesta de @Nikhil Nanjappa.

Puede usar una matriz para almacenar más elementos en localStorage. Almacenar objeto en 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 la parte inferior del cuerpo)

  

Mi solución no incluye php, pero JQuery & HTML5 LocalStorage y lo más importante, resolverá su problema.

En primer lugar, dentro de su función de success de ajaxFunction() , debe almacenar el valor de data1 y data2 en Localstorage variables Localstorage . Lea sobre LocalStorage aquí

ajaxFunction ()

  $.ajax({ type : "post", dataType : "text", url : "controller.php", data : { data1 : myData1, data2 : myData2}, success : function(msg){ document.getElementById('get').innerHTML = msg; // store your values in LocalStorage localStorage.setItem("StoredData1", myData1); localStorage.setItem("StoredData2", myData2); // redirect after storing window.location.href = 'Demo.html' } }); 

Luego, en un script incluido en Demo.html o directamente en su HTML, escriba el código JavaScript siguiente para obtener las variables LocalStorage que almacenamos anteriormente y anexar al div.

body HTML en Demo.html

  
I want to display newly inserted data below this div

JavaScript en Demo.html

 $(".afterThis").last().after("
"+ localStorage.getItem("StoredData1") +"
"); $(".afterThis").last().after("
"+ localStorage.getItem("StoredData2") +"
");

después de insertar en la base de datos use el archivo de función () para guardar en el archivo con la función de adición, que escriba una nueva fila en su archivo, y el archivo leído en demo.html –

En su controlador, use el archivo de función de uso para guardar en la cadena de modo agregar a su archivo. mira aquí: http://php.net/manual/en/function.file-put-contents.php

Y después de esto, llama a ajax para obtener, por ejemplo, read.php dentro de php use file () de php para leer este archivo, lo que escribiste antes.