版权声明：Callback_heaven©版权所有 https://blog.csdn.net/weixin_41564885/article/details/80828431
简单的留言板功能：
预览图：
实现功能：
验证+异步存储数据库
HTML：
<div class="basic-grey">
<h1>留言区
<span>您可以在这里写出您的留言</span>
</h1>
<label>姓名：</label>
<input type="text" name="" placeholder="请输入您的姓名" class="ly_name">
<span class="ly_name_warning">您的姓名有误！</span>
<label>联系方式:</label>
<input type="text" name="" placeholder="请输入您的联系方式" class="ly_phone">
<span class="ly_phone_warning">您的联系方式有误！</span>
<div class="lyc_container">
<label>留言区：</label>
<textarea id='memo' class="ly_text" style="resize: none;" placeholder="请输入您的留言"></textarea>
<span class="ly_text_warning">留言内容不能为空！</span>
<br>
<span> </span>
<input type="button" class="sub button" value="点击留言">
<input type="button" class="res button" value="点击重置">
</div>
</div>CSS：
.basic-grey {
margin-left:auto;
margin-right:auto;
max-width: 500px;
background: #F7F7F7;
padding: 25px 15px 25px 10px;
font: 12px Georgia, "Times New Roman", Times, serif;
color: #888;
text-shadow: 1px 1px 1px #FFF;
border:1px solid #E4E4E4;
}
.basic-grey h1 {
/*居中*/
font-size: 25px;
padding: 0px 0px 10px 40px;
display: block;
border-bottom:1px solid #E4E4E4;
margin: -10px -15px 30px -10px;
color: #888;
}
.basic-grey h1>span {
display: block;
font-size: 11px;
padding-top:10px;
}
.basic-grey label {
display: block;
margin: 0px;
}
.basic-grey label>span {
float: left;
width: 20%;
text-align: right;
padding-right: 10px;
margin-top: 10px;
color: #888;
}
.basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey textarea, .basic-grey select {
border: 1px solid #DADADA;
color: #888;
height: 30px;
margin-bottom: 16px;
margin-right: 6px;
margin-top: 2px;
outline: 0 none;
padding: 3px 3px 3px 5px;
width: 70%;
font-size: 12px;
line-height:15px;
box-shadow: inset 0px 1px 4px #ECECEC;
-moz-box-shadow: inset 0px 1px 4px #ECECEC;
-webkit-box-shadow: inset 0px 1px 4px #ECECEC;
}
.basic-grey textarea{
padding: 5px 3px 3px 5px;
font-size: 14px;
}
.basic-grey textarea{
height:100px;
}
.basic-grey .button {
background: #E27575;
border: none;
padding: 10px 25px 10px 25px;
color: #FFF;
box-shadow: 1px 1px 5px #B6B6B6;
border-radius: 3px;
text-shadow: 1px 1px 1px #9E3F3F;
cursor: pointer;
}
.basic-grey .button:hover {
background: #CF7A7A
}
.res{
position: absolute;
left:145px;
}
.ly_name_warning{
display: none;
color:red;
}
.ly_text_warning{
display: none;
color:red;
position: absolute;
top:60px;
}
.ly_phone_warning{
display: none;
color:red;
}
.lyc_container{
position: relative;
}JS：
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var all = $('.basic-grey');
var ly_text = all.find(".ly_text"); //留言内容
var ly_name = all.find('.ly_name'); //留言人姓名
var ly_phone = all.find('.ly_phone'); //留言人电话
var local_time = new Date(); //留言时间
var ly_time = local_time.toLocaleString();//转换
var reg_mobelphone = /^1[3|4|5|8][0-9]\d{4,8}$/;// 移动电话正则表达式
var reg_telphone = /^0\d{2,3}-[1-9]\d{6,7}$/; //固定电话正则表达式
var reg_name = /^[\u4E00-\u9FA5A-Za-z]+$/;//中/英文姓名正则表达式
var btn = all.find(".sub");
var res = all.find(".res");
var ly_name_warning = all.find('.ly_name_warning');
var ly_text_warning = all.find('.ly_text_warning');
var ly_phone_warning = all.find('.ly_phone_warning');
//重置按钮事件
res.click(function(){
if(ly_text.val() !== "" || ly_name.val() !== '' || ly_phone.val() !== ''){
ly_name.val("");
ly_text.val("");
ly_phone.val("");
}else{
return
}
})
btn.click(function(){
//验证姓名
if(ly_name.val() == ''){
ly_name_warning.show();
ly_name_warning.html("姓名不能为空");
return;
}else if(!reg_name.test(ly_name.val())){
ly_name_warning.show();
ly_name_warning.html("您填的姓名有误");
return;
}else{
ly_name_warning.hide();
}
//验证手机号
if(ly_phone.val() == ''){
ly_phone_warning.html("手机号不能为空");
ly_phone_warning.show();
return;
}
if(reg_mobelphone.test(ly_phone.val())){
ly_phone_warning.hide();
}else if(reg_telphone.test(ly_phone.val())){
ly_phone_warning.hide();
}else{
ly_phone_warning.show();
ly_phone_warning.html("您的联系方式有误！");
return;
}
//验证留言信息
if(ly_text.val() == ""){
ly_text_warning.show();
ly_text_warning.html("留言信息不能为空");
return;
}else{
ly_text_warning.hide();
}
//发送ajax请求
$.ajax({
url:"http://5ba35398.ngrok.io/message.php",
type:"get",
contentType:'application/json;charset=utf-8',
async:true,
dataType:"jsonp",
jsonp:"jsoncallback",
data:{
content:ly_text.val(),
name:ly_name.val(),
phone:ly_phone.val(),
time:ly_time,
act:"add"
},
//姓名 联系方式 时间
success:function(data){
if(data.error == 0){
alert("留言成功");
}
},
error:function(XMLHttpRequest, textStatus, errorThrown){
$("div").html(textStatus);
$("div").append("<br/>"+XMLHttpRequest.status);
$("div").append("<br/>"+XMLHttpRequest.readyState);
$("div").append("<br/>"+XMLHttpRequest.responseText);
}
})
})
})PHP：
<?php
include_once "init.php";
$callback = $_GET['jsoncallback'];
$act = $_GET["act"];//接口请求标识
switch ($act) {
case 'add'://提交留言
$content = $_GET["content"];
$ly_time = $_GET["time"];
$name = $_GET["name"];
$phone = $_GET["phone"];
$time = time();
$times = date("Y-m-d H:i:s",$time);
$query = "INSERT INTO message_text(id,content,name,phone,message_time) VALUES(null,'{$content}','{$name}','{$phone}','{$ly_time}')";
mysqli_query($link,$query);
$insertId = mysqli_insert_id($link);
if($insertId>0){
$arr = ["error"=>0,"id"=>$insertId,"time"=>$times];
exit($callback."(".json_encode($arr).")");
}
else{
$arr = ["error"=>1,"msg"=>"留言失败，请重试!"];
exit($callback."(".json_encode($arr).")");
}
break;
}遇到的问题：
跨域问题，数据可以发送但是调用error函数
解决：
AJAX中添加
jsonp:"jsoncallback"
PHP中添加
$callback = $_GET['jsoncallback'];返回形式为：
exit($callback."(".json_encode($arr).")");成功效果：
参考文章：https://blog.csdn.net/u011078940/article/details/51823143，https://blog.csdn.net/sexy_squirrel/article/details/53817829