基于MySQLi和jQuery的评论系统

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

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

这里写图片描述

说明:
通过.getJSONshow.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;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值