Update dynamically a page through ajax and php

Question

I want to submit data through ajax to the database and after inserting data into database this data should be displayed on the file Demo.html dynamically at t

Answer 1

My solution does not involve php but JQuery & HTML5 LocalStorage and most importantly it will solve your issue.

Firstly inside your success function of ajaxFunction() you should store the value of data1 and data2 in Localstorage variables. Read about LocalStorage here

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

Then in a script included in Demo.html or directly in its HTML write the below JavaScript code to fetch the LocalStorage variables we stored earlier and append to the div.

HTML body in Demo.html

  
 I want to display newly inserted data below this div

JavaScript in Demo.html

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