Я хочу отправить данные через ajax в базу данных, и после вставки данных в базу данных эти данные должны отображаться в файле Demo.html динамически на последнем, т.е. после div в моем случае.
Хорошо хранить данные через ajax, которые я сделал, но я не знаю, как отображать эти недавно вставленные данные в Demo.html. Так что дайте мне знать, как это сделать.
Ниже мой код.
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; ?>
demo.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>
Он основан на ответе от @Nikhil Nanjappa.
Вы можете использовать массив для хранения большего количества элементов в localStorage. Храните объект в 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 (внизу тела)
<script type="text/javascript"> StoredData = JSON.parse(localStorage.getItem("StoredData")); StoredData.reverse().forEach( function(data) { $('#first').after('<div>data = ' + data +'</div>') }); </script>
Мое решение не связано с PHP, но JQuery и HTML5 LocalStorage и, самое главное, оно решит вашу проблему.
Во-первых, внутри вашей функции success ajaxFunction() вы должны хранить значение data1 и data2 в переменных Localstorage . Читайте о LocalStorage здесь
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' } });
Затем в скрипте, включенном в Demo.html или непосредственно в его HTML, напишите приведенный ниже код JavaScript для извлечения переменных LocalStorage мы сохранили ранее, и добавим в div.
body HTML в Demo.html
<body> <div id="first" class="afterThis" align="center"> I want to display newly inserted data below this div</div> </body>
JavaScript в Demo.html
$(".afterThis").last().after("<div class='afterThis'>"+ localStorage.getItem("StoredData1") +"</div>"); $(".afterThis").last().after("<div class='afterThis'>"+ localStorage.getItem("StoredData2") +"</div>");
после вставки в базу данных используйте функцию file () для сохранения в файл с добавлением подфункции, которые записывают новую строку в ваш файл, и файл read в demo.html – <НО, это должно быть php-файл и функция php, чтобы прочитать ваш последний вставленный данные, затем простое перенаправление в ajax в успехе: раздел к вашему файлу или, например, чтение файла, чтобы div exaclly, где вы хотите.
В вашем контроллере php используйте функциональный файл для сохранения в строке режима добавления в файл. смотрите здесь: http://php.net/manual/en/function.file-put-contents.php
И после этого вызова ajax, чтобы получить, например, read.php внутри php use file () php, чтобы прочитать этот файл, что вы написали раньше.