基于MySQLi和jQuery的评论系统

最新推荐文章于 2022-05-20 07:45:00 发布

koastal

最新推荐文章于 2022-05-20 07:45:00 发布

阅读量641

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery MySQLi PHP

本文链接：https://blog.youkuaiyun.com/koastal/article/details/50652173

PHP 同时被 3 个专栏收录

91 篇文章

订阅专栏

jQuery

19 篇文章

订阅专栏

MySQLi

5 篇文章

订阅专栏

本文介绍了一个在线留言板系统的实现，包括使用HTML、CSS、JavaScript等前端技术收集用户输入，并通过PHP后端处理数据，与MySQL数据库进行交互，实现用户评论的实时显示与存储。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写图片描述

说明：
通过 $.getJSON方法从show.php页面获取数据库中已存在的评论。通过$ .ajax方法将表单内容发送到function.php页面，插入到数据库中，然后显示在页面中。

index.html

<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>留言板</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
.content{
    width:800px;
    height:auto;
    margin:0 auto;
}
#msg{
    margin:20px;
    line-height:25px;
}
.form{
    line-height:30px;
    padding:30px;
}
#submit{
    margin:20 70;
}
</style>
</head>
<body>
<div class="content">
<div id="msg">
</div>
<hr/>
    <div class="form">
        姓名：<input type="text" id="name"/><br/>
        性别：<input type="radio" name="sex" value="男">男
        <input type="radio" name="sex" value="女">女<br/>
        网址：<input type="text" id="url" /><br/>
        留言：<textarea rows="3" cols="40" id="text">
        </textarea><br/>
        <button id="submit">提交</button>
    </div>
</div>
</body>
<script type="text/javascript">
$(function(){
    $.getJSON("./show.php",function(data){
        $.each(data,function(msg){
            var content=content = "<p><a href=\""+msg["url"]+"\">"+msg["name"]+"</a><br/>性别："+msg["sex"]+"<br/>"+msg["text"]+"</p>";
            $("#msg").prepend(content+"<hr/>");
        })
    });
    $("#submit").click(function(){
        var name = $("#name").val();
        var url = $("#url").val();
        var text = $("#text").val();
        var sex = '';
        $(":radio").each(function(){
            if($(this).is(":checked")){
                sex = $(this).val();
            }
        });
        $.ajax({
            type:"POST",
            url:"./function.php",
            data:{
                name:name,
                url:url,
                sex:sex,
                text:text
            },
            dataType:"json",
            success:function(data){
                var content = "";
                if(data.success == true){
                    content = "<p><a href=\""+data.msg.url+"\">"+data.msg.name+"</a><br/>性别："+data.msg.sex+"<br/>"+data.msg.text+"</p>";
                }else{
                    content = "添加留言失败";
                }
                $("#msg").prepend(content);
            },
            error:function(res){
                alert("发生错误"+res.status);
            }
        });
    });
});
</script>
</html>

connect.php

<?php
/*
**author:koastal
**date:2016年2月13日
*/
$mysqli = new mysqli("localhost", "root", "", "test");
if($mysqli->errno){
    echo "Connect Error:".$mysqli->error;
}
$mysqli->set_charset("UTF8");
header("Content-type:text/html;charset=utf-8");

function.php

<?php
/*
**author:koastal
**date:2016年2月13日
*/
$name = $_POST["name"];
$url = $_POST["url"];
$sex = $_POST["sex"];
$text = $_POST["text"];

$mysqli = new mysqli("localhost", "root", "", "test");
$mysqli->set_charset("utf8");

$query = "INSERT INTO message(name,url,sex,text) VALUES('$name','$url','$sex','$text')";
$res = $mysqli->query($query);
if($res){
   $json = array(
       "success"=>true,
       "msg"=>array(
           "name"=>"$name",
           "url"=>"$url",
           "sex"=>"$sex",
           "text"=>"$text"
       )
   );
   $json = json_encode($json);
   echo $json;
}else{
   echo '{"success":false}'; 
}
$mysqli->close();

show.php

<?php
/*
**author:koastal
**date:2016年2月13日
*/
require_once 'connect.php';

$query = "SELECT * FROM message";
$result = $mysqli->query($query);
$rows = $result->fetch_all(MYSQLI_ASSOC);
$mysqli->close();
$json = json_encode($rows);
echo $json;