add.php:
<?php
//连接数据库
$mysqli=new mysqli('localhost','root','','php');
if ($mysqli->connect_errno>0) { //错误编号
echo "连接错误";
echo $mysql->connect_error; //错误信息
exit;
};
$mysqli->query("SET NAMES UTF8");
//提取数据且排序
$sql="SELECT *FROM message ORDER BY id DESC";
$isdata_result=$mysqli->query($sql);
$rows=[];
while ($row=$isdata_result->fetch_array(MYSQLI_ASSOC)) {
$rows[]=$row; //赋值给二维数组
};
?>
content.php:
<?php
$mysqli=new mysqli('localhost','root','','php');
if ($mysqli->connect_errno>0) { //错误编号
echo "连接错误";
echo $mysql->connect_error; //错误信息
exit;
};
//转格式
$mysqli->query("SET NAMES UTF8");
class input{
function __construct() {
}
function post($key){
$val=$_POST[$key];
return $val;
}
};
//对象实例化
$input=new input();
$msg=$input->post('msg');
$use=$input->post('use');
//添加数据
$sql="INSERT INTO message (`msg`,`use`) values ('{$msg}','{$use}')";
// 执行sql语句
$Mysqli=$mysqli->query($sql);
var_dump($Mysqli)
?>
jq部分:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>提交数据</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<form action="submit.php" method="post" accept-charset="utf-8" style="width: 480px">
<input type="text" name="msg" id="message">
<textarea type="text" name="use" id="usename"></textarea>
<button type="submit" class="btn btn-success pull-right">button</button>
</form>
<div id="information">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
$("form>input:eq(2)").submit(function(ev){
$this.ajaxSubmit({
type : 'post',
url : 'add.php',
data : {
user:$('#usename').val(),
content:$('#message').val()
},
success:function (data) {
var json = $.parseJSON(data);
console.log(data);
var html='';
$.each(json,function(index,value){
html+='<div><p>发言者:'+value.user+'</p>'+'<p>留言内容:'+value.content+'</p></div>' });
$('#information').append(html)
}
ev.preventDefault();
});
})
</script>
</body>
</html>
慕勒0069038