这里就简单写个使用ajax留言板的demo。
使用原生js，php。
liuyan.html
<!DOCTYPE HTML>
<html>
<head>
<title> 留言板</title>
</head>
<body>
<form action="password.php" method="post">
Username: <input type="text" name="username" id="username">
Title: <input type="text" name="title" id="title"><br>
Content: <br>
<textarea rows="10" cols="30" name="Content" id="Content"></textarea>
<br>
<button type="button" onclick="loadXMLDoc()">Submit</button>
</form>
<hr>
<div id="liuyan">
</div>
</body>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;var username; var title;
username = document.getElementById("username").value;
title = document.getElementById("title").value;
content = document.getElementById("Content").value;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","password.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("username="+username+"&title="+title+"&Content="+content);
}
function loadliuyan()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("liuyan").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","liuyan.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send();
}
loadliuyan();
</script>
</html>
liuyan.php
<?php
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "mydb";
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
$sql = "SELECT username, content, title FROM User";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// 输出数据
while($row = $result->fetch_assoc()) {
echo "<div>
<h1>".$row['title']."</h1>
<p>".$row['username']."</p>
<p>".$row['content']."</p>
<hr>
</div>";
}
}
?>
password.php
<?php
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "mydb";
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
$name = $_POST['username'];
$title = $_POST['title'];
$content = $_POST['Content'];
$sql = "INSERT INTO User (username, title, content)
VALUES ('$name','$title','$content')";
$result = $conn->query($sql);
if ($conn->query($sql) === TRUE) {
echo "suceess";
echo "<a href='liuyan.php'>跳转首页</a>";
}else{
echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
?>