通过ajax和php动态更新页面 [英] Update dynamically a page through ajax and php
本文介绍了通过ajax和php动态更新页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想通过ajax向数据库提交数据，将数据插入数据库后，该数据应最后动态显示在文件 Demo.html 上，在我的情况下是div之后. /p>
我已经通过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>
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 the last i.e., after div in my case.
Well storing data through ajax i have done but i don't know how to display this newly inserted data to Demo.html.So do guide me how to achieve this.
Below is my 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;
?>
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>
解决方案
It's based on answer from @Nikhil Nanjappa.
You can use an array to store more items in localStorage. Store object in 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 (At the bottom of the body)
<script type="text/javascript">
StoredData = JSON.parse(localStorage.getItem("StoredData"));
StoredData.reverse().forEach( function(data) {
$('#first').after('<div>data = ' + data +'</div>')
});
</script>
这篇关于通过ajax和php动态更新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
