技术栈
Bootstrap + JavaScript + jQuery + AJAX + Thymeleaf
源代码
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>维修预约平台</title>
<link rel="icon" th:href="@{/favicon.ico}">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
html,body {
height: 100%;
font-size: 1rem;
}
body {
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
@media (min-width: 576px) {
html { font-size: 1.25rem; }
}
@media (min-width: 768px) {
html { font-size: 1.5rem; }
}
@media (min-width: 992px) {
html { font-size: 1.75rem; }
}
@media (min-width: 1200px) {
html { font-size: 2rem; }
}
</style>
</head>
<body id="application">
<div class="container">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 mx-auto">
<header class="mt-5 mb-5 text-center">
<h2>浙理计协维修预约平台</h2>
<p class="tm-form-description">浙理计协——义务维修队</p>
</header>
<div class="text-monospace lead text-info row-fluid">
<div class="card">
<div class="card-header">
报修须知：
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">1.服务是免费的，如果您力所能及，请捐助我们，让我们做的更好！</li>
<li class="list-group-item">2.我们提供包括但不限于以下服务
<ul>
<li>系统安装/重装、软件问题</li>
<li>拆机清灰</li>
<li>硬件升级（导购、安装、更换等）</li>
<li>其他电脑问题咨询</li>
</ul >
</li>
<li class="list-group-item">3.下列情况请直接送售后服务点
<ul >
<li>出现明显的硬件故障，如屏幕破损、进水等</li>
<li>电脑未过保修期但需要拆机的</li>
</ul>
</li>
<li class="list-group-item">4.非电脑产品，仅提供有限的服务</li>
<li class="list-group-item">5.如有其他问题，联系客服QQ：1367138194</li>
</ul>
</div>
</div>
<h3>请认真填写以下信息:</h3>
<form id="form" name="form" class="tm-form-white tm-font-big" accept-charset="UTF-8" _charset="UTF-8">
<div class="text-monospace p-3 bg-light rounded row">
<div class="form-group mb-5 col-xl-12 col-lg-12 col-md-12 col-sm-12">
<label for="name" class="black-text mb-4 big control-label">称呼</label>
<input id="name" name="name" type="text" value=""
class="validate form-control tm-input-white-bg" required autofocus>
</div>
<div class="form-group mb-5 col-xl-6 col-lg-6 col-md-12 col-sm-12">
<label for="tel" class="black-text mb-4 big control-label">电话（长号）</label>
<input id="tel" name="telephone" type="text" value=""
class="validate form-control tm-input-white-bg" maxlength="11" required>
</div>
<div class="form-group mb-5 col-xl-6 col-lg-6 col-md-12 col-sm-12">
<label for="qq" class="black-text mb-4 big control-label">QQ（可选）</label>
<input id="qq" name="qq" type="text" value=""
class="validate form-control tm-input-white-bg" maxlength="10" >
</div>
<div class="form-group mb-5 col-xl-12 col-lg-12 col-md-12 col-sm-12">
<label for="brand" class="black-text mb-4 big control-label">电脑品牌</label>
<select id="brand" class="form-control" name="brand">
<option>请选择</option>
<option>Acer宏基</option>
<option>Dell戴尔</option>
<option>TOSHIBA东芝</option>
<option>ASUS华硕</option>
<option>HP惠普</option>
<option>Lenovo联想</option>
<option>MSI微星</option>
<option>Apple苹果</option>
<option>HASEE神舟</option>
<option>SAMSUNG三星</option>
<option>其他</option>
</select>
</div>
<div class="form-group mb-5 col-xl-12 col-lg-12 col-md-12 col-sm-12">
<label for="address" class="black-text mb-4 big control-label">地址</label>
<input id="address" name="address" value="" type="text"
class="form-control" required>
</div>
<div class="form-group mb-5 col-xl-12 col-lg-12 col-md-12 col-sm-12">
<label for="text" class="black-text mb-2 big">故障描述(可选)</label>
<textarea class="form-control" name="description" id="text" cols="25" value="" rows="6"></textarea>
</div>
</div>
<div class="text-center mt-5">
<button id="submit" type="button"
class="btn btn-primary btn-large btn-large-white">Submit</button>
</div>
</form>
</div>
</div>
<footer class="row tm-mt-big mb-3">
<div class="col-xl-12 text-center">
<p class="d-inline-block tm-bg-black white-text py-2 tm-px-5">
Copyright © 2020 <a rel="nofollow" href="https://www.zstuca.club">ZSTUCA</a>
</p>
</div>
</footer>
</div>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">提示</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script type="application/javascript">
$(document).ready(function() {
/**
* 自动将form表单封装成json对象
*/
$.fn.serializeObject = function() {
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [ o[this.name] ];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
//ajax请求，以json格式
$("#submit").on("click", function() {
if($('input#name').val()==''){
$('.modal-body').text('称呼不能为空！');
$('#exampleModalCenter').modal('show');
return false;
}
var p=$('input#tel').val();
if(p==''){
$('.modal-body').text("联系电话不能为空！");
$('#exampleModalCenter').modal('show');
return false;
}
var t=/^1[3456789]\d{9}$/;
if(!t.test(p)){
$('.modal-body').text("联系电话有误！");
$('#exampleModalCenter').modal('show');
return false;
}
var qq=$('input#qq').val();
/*if(qq==''){
warning("QQ不能为空！");
return false;
}*/
var qt=/^[1-9][0-9]{4,11}$/;
if(qq!='' && !qt.test(qq)){
$('.modal-body').text("QQ有误！");
$('#exampleModalCenter').modal('show');
return false;
}
var add=$('input#address').val();
if(add==''){
$('.modal-body').text("地址不能为空！");
$('#exampleModalCenter').modal('show');
return false;
}
$.ajax({
url:"./submit",
type:"post",
data:JSON.stringify($('#form').serializeObject()),
contentType:"application/json",
dataType:"json",
success:function(data){
if(data.code === '200'){
$('.modal-body').text("提交成功！");
$('#exampleModalCenter').modal('show');
}else{
$('.modal-body').text("提交失败！" + data.msg);
$('#exampleModalCenter').modal('show');
}
},
error:function (XMLHttpRequest, textStatus, errorThrown) {
$('.modal-body').text("提交失败！" + textStatus);
$('#exampleModalCenter').modal('show');
}
})
});
});
console.log("Zstuca welcomes you!");
console.log("contact us QQ:1047377010");
</script>
</body>
</html>运行效果
参考文章
https://blog.csdn.net/weixin_43272781/article/details/104301739
