Bootstrap + Thymeleaf——预约维修前端页面设计(UI + JS数据校验 + JSON序列化 + AJAX提交)DEMO
Posted Starzkg
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Bootstrap + Thymeleaf——预约维修前端页面设计(UI + JS数据校验 + JSON序列化 + AJAX提交)DEMO相关的知识，希望对你有一定的参考价值。
技术栈
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/bootstrap@4.4.1/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/jquery@3.4.1/dist/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/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]\\d9$/;
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:xxxx");
</script>
</body>
</html>运行效果
参考文章
jQuery——封装form表单的数据为json对象_Starzkg的博客-CSDN博客
简介 · Bootstrap v4 中文文档 v4.6 | Bootstrap 中文网
以上是关于Bootstrap + Thymeleaf——预约维修前端页面设计(UI + JS数据校验 + JSON序列化 + AJAX提交)DEMO的主要内容，如果未能解决你的问题，请参考以下文章
Thymeleaf 布局中的 Bootstrap 导航栏突出显示
Bootstrap 4 webjar css 不适用于 Spring Boot + Thymeleaf