jq.ajax+php+mysql数据库实现用户无刷新评论

最新推荐文章于 2021-01-27 02:46:15 发布

戏里戏外。

最新推荐文章于 2021-01-27 02:46:15 发布

阅读量1.3k

点赞数

分类专栏： ajax+php+mysql 文章标签： ajax javascript php jquery 功能

本文链接：https://blog.csdn.net/hjw453321854/article/details/78826954

版权

ajax+php+mysql 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

最终效果图：

html+css代码

<html>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<style>
*{margin:0;padding:0;}
.box{width:600px;height:300;margin:50px auto;}
.box p{width:600px;height:40px;border-bottom:1px solid #999;}
.box p b{width:80px;height:40px;line-height:40px;font-size:20px;border-bottom:1px solid red;display:block;}
.box .con{margin-top:20px;}
.box small{margin-left:5px;color:#999;font-size:12px;}
.box .name{width:100px;height:30px;line-height:30px;display:inline-block;}
.box .text{width:300px;height:100px;display:inline-block;}
.box .btn{width:80px;height:30px;line-height:30px;display:block;margin:20px 0 0 80px;}
.ul li{width:600px;margin:0 auto;list-style:none;}
.ul li p{width:600px;height:30px;line-height:30px;text-align:left;color:#000;font-size:16;}
.ul li span{width:480px;line-height:30px;text-align:left;font-size:14px;display:inline-block;color:#333;}
.ul li a{width:120px;line-height:30px;text-align:center;color:#333;font-size:12px;display:inline-block;}
</style>
<body>
<div class="box">
	<p><b>发表评论</b></p>

	<div class="con">
		用户名：<input type="text" class="name"><small>请输入6到15位字母加数字用户名</small><br><br>
	  	评论区：<textarea cols="40" rows="6" class="text" placeholder="请说出您的建议和意见，最多不超过60个字"></textarea>
				<input type="button" value="提交" class="btn">					
	</div>
</div>
<ul class="ul"></ul>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="cons.js"></script>
</body>
</html>

js代码实现缓存以及无刷新评论

$(document).ready(function(){

var text=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,15}$/

    $.getJSON("data.php", function(json) {  
	function sort(a,b){
	return a.int-b.int;
	}
	json.sort(sort);//进行数据排序
        $.each(json, function(index, array) {
            var data ="<li><p>" + "用户" + array["name"] + ":" + "</p><span>" + array["messages"] + "</span><a>" + array["time"] + "</a></li>";
            $(".ul").append(data);  
        });
    });
    
    $(".con .name").blur(function(){
        if(!text.test($(".con .name").val())){
            $(".con small").css("color","red")
        }else{
            $(".con small").css("color","#999")
        }
    })

    $(".btn").click(function(){

        function p(s) {
            return s < 10 ? '0' + s : s;
        }
        var myDate = new Date();
        var year=myDate.getFullYear();
        var month=myDate.getMonth()+1;
        var date=myDate.getDate(); 
        var h=myDate.getHours();
        var m=myDate.getMinutes();
        var s=myDate.getSeconds();  
        var now=year+'-'+p(month)+"-"+p(date)+" "+p(h)+':'+p(m)+":"+p(s);

        if(!text.test($(".con .name").val())){
            
            }else if($(".box .text").val().length == 0){
                alert("请说出您宝贵的意见和建议")
            }else{

                $.ajax({
                    type:"POST",
                    url:"msg.php",
                    data:{"name":$(".con .name").val(),"messages":$(".box .text").val(),"time":now},
                    success:function(data){
                        var str= "<li><p>" + "用户" + $(".con .name").val() + ":" + "</p><span>" + $(".box .text").val() + "</span><a>" + now + "</a></li>";
                            
                            $(".ul").append(str);
                            alert(data);
                        
                    },
                    error:function(){  
                        console.log("失败，请稍后再试！");  
                    },
                });      
            }          
        })  
    })

data.php用户展示数据

<?php  
$con = mysqli_connect('localhost', 'username', 'password');
if(! $con )
{
    die('连接失败: ' . mysqli_error($con));
}

mysqli_select_db($con,'bdm256727651_db');
mysqli_query($con,"set names utf8");
$sql = "select * FROM Messages";
$result = mysqli_query($con,$sql );

while($row=mysqli_fetch_array($result)){
	$datas[] = array("name"=>$row['name'],"messages"=>$row['messages'],"time"=>$row['time']);

}
echo json_encode($datas);//以json格式编码

msg.php储存数据库

<?php
$con = mysqli_connect('localhost', 'username', 'password');
if(! $con )
{
    die('连接失败: ' . mysqli_error($con));
}
mysqli_select_db($con,'bdm256727651_db');
mysqli_query($con,"set names utf8");
$sql=" INSERT INTO Messages (name,messages,time)
VALUES('$_POST[name]','$_POST[messages]','$_POST[time]') ";
mysqli_query($con,$sql);
echo "发表成功";	

mysqli_close($con)
?>

数据库表

文章源代码下载：https://github.com/jwhuang59/demo/tree/master/comment

戏里戏外。

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
jq.ajax+php+mysql数据库实现用户无刷新评论

最终效果图：html+css代码*{margin:0;padding:0;}.box{width:600px;height:300;margin:50px auto;}.box p{width:600px;height:40px;border-bottom:1px solid #999;}.box p b{width:80px;height:40px;line-heig
复制链接

扫一扫